zoukankan      html  css  js  c++  java
  • el-dialog拖拽功能

    开始也是用vue自定义指令来实现,后来发现一个页面中有两个el-dialog时,只有一个起作用,求指点。。。

    所以写了一个全局的方法来调用。

     
    ~/utils/dialogDrag.js

    1
    export default { 2 dialogDrag(el) { 3 let dragDom = el.querySelector('.el-dialog'); 4 let dragDomHeader = el.querySelector('.el-dialog__header'); 5 dragDomHeader.style.cursor = 'move'; 6 dragDomHeader._isDrag = false; 7 // 鼠标按下事件 8 // onmousedown事件绑定之所以在el-dialog__header上,是因为绑定在el-dialog时弹框中的表单会无法编辑 9 dragDomHeader.onmousedown = (e) => { 10 dragDomHeader._isDrag = true; 11 // 鼠标相对元素的位置 12 dragDomHeader._startX = e.clientX - dragDomHeader.offsetLeft; 13 dragDomHeader._startY = e.clientY - dragDomHeader.offsetTop; 14 e.preventDefault(); 15 }; 16 document.onmousemove = (e) => { 17 if (dragDomHeader._isDrag) { 18 // 鼠标的位置减去鼠标相对元素的位置得到元素的位置 19 let _endX = e.clientX - dragDomHeader._startX; 20 let _endY = e.clientY - dragDomHeader._startY; 21 dragDom.style.left = _endX + 'px'; 22 dragDom.style.top = _endY + 'px'; 23 } 24 }; 25 document.onmouseup = () => { 26 dragDomHeader._isDrag = false; 27 }; 28 } 29 };
     index.vue

    1
    <template> 2 <el-dialog @open="openDialog" ref="dialog"> 3 </el-dialog> 4 </template> 5 6 <script> 7 import DialogDrag from '~/utils/dialogDrag'; 8 9 methods: { 10 openDialog() { 11 DialogDrag.dialogDrag(this.$refs.dialog.$el); 12 } 13 } 14 </script>
  • 相关阅读:
    A1023 Have Fun with Numbers (20分)(大整数四则运算)
    A1096 Consecutive Factors (20分)(质数分解)
    A1078 Hashing (25分)(哈希表、平方探测法)
    A1015 Reversible Primes (20分)(素数判断,进制转换)
    A1081 Rational Sum (20分)
    A1088 Rational Arithmetic (20分)
    A1049 Counting Ones (30分)
    A1008 Elevator (20分)
    A1059 Prime Factors (25分)
    A1155 Heap Paths (30分)
  • 原文地址:https://www.cnblogs.com/zoey-blog/p/12718768.html
Copyright © 2011-2022 走看看