el-dialog新增拖拽功能
阿新 • • 發佈:2021-12-01
import Vue from 'vue' Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-dialog') dialogHeaderEl.style.cursor = 'move' const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null) dialogHeaderEl.onmousedown = (e) => { const disX = e.clientX - dialogHeaderEl.offsetLeft const disY = e.clientY - dialogHeaderEl.offsetTop let styL, styT if (sty.left.includes('%')) { styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100) styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100) } else { styL = +sty.left.replace(/\px/g, '') styT = +sty.top.replace(/\px/g, '') } document.onmousemove = function(e) { const l = e.clientX - disX const t = e.clientY - disY dragDom.style.left = `${l + styL}px` dragDom.style.top = `${t + styT}px` // 將此時的位置傳出去 // binding.value({x:e.pageX,y:e.pageY}) } document.onmouseup = function(e) { document.onmousemove = null document.onmouseup = null } } } })
在directives目錄中新建v-drag.js,將以上程式碼拷貝進去
建立vdireactive.js
import drag from './v-drag'; export { drag };
index.js中程式碼如下
import Vue from 'vue'; import * as directives from '@/common/directives/vdirectives.js'; // 註冊指令 Object.keys(directives).forEach(k => Vue.directive(k, directives[k]));
在main.js中引入
import '@/common/directives'
程式碼搬運工