拖拽组件
dialogDrag.vue
<template><div></div>
</template>
<script>export default {name: 'dialogDrag',data() {return {originalWidth: null,originalHeight: null}},created() {this.$nextTick(()=>{this.dialogDrag()})},mounted() {},methods: {dialogDrag(){//获取弹窗DOMlet dragDom = this.$el.getElementsByClassName('el-dialog')[0]// this.originalWidth = dragDom.style.width// this.originalHeight = dragDom.style.height//弹窗标题顶部DOMlet dialogHeaderDom = this.$el.getElementsByClassName('el-dialog__header')[0]//设置拖动样式dialogHeaderDom.style.cursor = 'move'let mousedown = falseconst sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)//鼠标按下弹窗顶部dialogHeaderDom.onmousedown = (e) => {if(e.stopPropagation) e.stopPropagation();if(e.preventDefault) e.preventDefault();if (e.detail === 2) {if (this.originalWidth || this.originalHeight) {// 还原弹窗的宽度和高度dragDom.style.width = this.originalWidthdragDom.style.height = this.originalHeightthis.originalWidth = nullthis.originalHeight = null} else {// 保存当前弹窗的宽度和高度this.originalWidth = dragDom.style.widththis.originalHeight = dragDom.style.height// 设置弹窗宽度和高度为窗口的宽度和高度dragDom.style.width = '100vw'dragDom.style.height = window.innerHeight + 'px'dragDom.style.overflow= 'auto'}mousedown = falsedocument.onmousemove = nulldocument.onmouseup = null}mousedown = true // 鼠标距离弹框的距离//获取鼠标拖拽起始X位置const startLeft = e.clientX - dialogHeaderDom.offsetLeft//获取鼠标拖拽起始Y位置const startTop = e.clientY - dialogHeaderDom.offsetTop // 现在弹框的left，toplet styL, styTif (sty.left.includes('%')) {styL = +document.body.clientWidth * (+sty.left.replace('%', '') / 100)styT = +document.body.clientHeight * (+sty.top.replace('%', '') / 100)} else {styL = +sty.left.replace('px', '')styT = +sty.top.replace('px', '')}document.onmousemove = function(e) {if (!mousedown) {return false} // 鼠标移动的距离 + 弹框的left/toplet l = e.clientX - startLeft + styLlet t = e.clientY - startTop + styTconst offsetParent = dragDom.offsetParent || document.bodyconst maxL = offsetParent.clientWidth - dragDom.clientWidth//设置拖拽到底部最大高度4分之1const maxT = offsetParent.clientHeight - dragDom.clientHeight + (sty.height.toString().split('p') && Number(sty.height.toString().split('p')[0])/1.5)if (maxL < l) {l = maxL} else if (l < 0 && l * -1 > startLeft) {// 向左偏移的距离 l = -startLeft;}if (t < 0) {t = 0} else if (maxT < t) {t = maxT}dragDom.style.left = `${l}px`dragDom.style.top = `${t}px`}// document.onmouseup = function(e) {// mousedown = false// document.onmousemove = null// document.onmouseup = null// }document.body.addEventListener('mouseup', () => {// mouseup 需要执行的代码块mousedown = falsedocument.onmousemove = nulldocument.onmouseup = null})}}}}
</script><style scoped></style>
index.js
import dialogDragMixin from './dialogDrag'export function installElement(Vue, Element) {Element.Dialog.mixins.push(dialogDragMixin);}
main.js
import { installElement } from '@/config/element';
installElement(Vue, Element);创建目录
