vue elemenet 彈窗拖拽
阿新 • • 發佈:2018-12-03
1、在main.js同級建一個檔案directives.js
import Vue from 'vue'; // v-dialogDrag: 彈窗拖拽 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'; // 獲取原有屬性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null); dialogHeaderEl.onmousedown = (e) => { // 滑鼠按下,計算當前元素距離可視區的距離 const disX = e.clientX - dialogHeaderEl.offsetLeft; const disY = e.clientY - dialogHeaderEl.offsetTop; // 獲取到的值帶px 正則匹配替換 let styL, styT; // 注意在ie中 第一次獲取到的值為元件自帶50% 移動之後賦值為px 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; }; } } }) // v-dialogDragWidth: 彈窗寬度拖大 拖小 Vue.directive('dialogDragWidth', { bind(el, binding, vnode, oldVnode) { const dragDom = binding.value.$el.querySelector('.el-dialog'); el.onmousedown = (e) => { // 滑鼠按下,計算當前元素距離可視區的距離 const disX = e.clientX - el.offsetLeft; document.onmousemove = function (e) { e.preventDefault(); // 移動時禁用預設事件 // 通過事件委託,計算移動的距離 const l = e.clientX - disX; dragDom.style.width = `${l}px`; }; document.onmouseup = function (e) { document.onmousemove = null; document.onmouseup = null; }; } } })
2、main.js新增引用
import './directives.js'
3、在需要用到拖拽功能的彈窗標籤上加
v-dialogDrag
例如:
<el-dialog title="預覽" :visible.sync="viewDialogVisible" v-dialogDrag>
</el-dialog>
即可