利用vue自定义指令directive实现拖动elementUI的dialog

叁歲伎倆 2021-12-20 00:39 388阅读 0赞 
  1. <template>
  2.         <el-dialog :visible.sync="testDialog" title="测试弹框拖拽" v-dialogDrag="{ x: transformX, y: transformY }" :close-on-click-modal="false" :append-to-body="true" :modal-append-to-body="true">
  4.         </el-dialog>
  5. </template>
  6. <script>
  7.     Vue.directive('dialogDrag', {
  8.         bind(el, binding, vnode, oldVnode) {
  9.             // 获取拖拽内容头部
  10.             const dialogHeaderEl = el.querySelector('.el-dialog__header');
  11.             const dragDom = el.querySelector('.el-dialog');
  12.             dragDom.style.transform="translate("+binding.value.x+"px,"+binding.value.y+"px)";
  13.             dialogHeaderEl.style.cursor = 'move';
  14.             // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
  15.             const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
  16.             // 鼠标按下事件
  17.             dialogHeaderEl.onmousedown = (e) => {
  18.                 // 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
  19.                 const disX = e.clientX - dialogHeaderEl.offsetLeft;
  20.                 const disY = e.clientY - dialogHeaderEl.offsetTop;
  21.                 // 获取到的值带px 正则匹配替换
  22.                 let styL, styT;
  23.                 // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
  24.                 if (sty.left.includes('%')) {
  25.                     styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)+binding.value.x;
  26.                     styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)+binding.value.y;
  27.                 } else {
  28.                     styL = +sty.left.replace(/\px/g, '')+binding.value.x;
  29.                     styT = +sty.top.replace(/\px/g, '')+binding.value.y;
  30.                 };
  31.                 // 鼠标拖拽事件
  32.                 document.onmousemove = function (e) {
  33.                     // 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
  34.                     const l = e.clientX - disX;
  35.                     const t = e.clientY - disY;
  36.                     let finallyL = l + styL;
  37.                     let finallyT = t + styT;
  38.                     // 边界值判定 注意clientWidth scrollWidth区别 要减去之前的top left值
  39.                     if (finallyL < 0) {顶部
  40.                         finallyL = 0
  41.                     } else if (finallyL > dragDom.offsetParent.clientWidth - dragDom.clientWidth) {///底部
  42.                         finallyL = dragDom.offsetParent.clientWidth - dragDom.clientWidth
  43.                     }
  45.                     if (finallyT < 0) {顶部
  46.                         finallyT = 0
  47.                     } else if (finallyT > dragDom.offsetParent.clientHeight - dragDom.clientHeight) (///底部
  48.                         finallyT = dragDom.offsetParent.clientHeight - dragDom.clientHeight
  49.                     )
  50.                     binding.value.x=finallyL;
  51.                     binding.value.y=finallyT;
  52.                     dragDom.style.transform="translate("+finallyL+"px,"+finallyT+"px)";
  53.                     //将此时的位置传出去
  54.                     //binding.value({x:e.pageX,y:e.pageY})
  55.                 };
  56.                 document.onmouseup = function (e) {
  57.                     document.onmousemove = null;
  58.                     document.onmouseup = null;
  59.                 };
  60.             }
  61.         }
  62.     })
  63.     export default {
  64.         name: "testDialog",
  65.         data(){
  66.             return{
  67.                 testDialog:true,
  68.                 transformX:100,
  69.                 transformY:200
  70.             }
  71.         },
  72.         methods:{
  73.             open:function () {
  74.                 this.testDialog=true
  75.             }
  76.         }
  77.     }
  78. </script>
  79. <style>
  80.         .el-dialog{
  81.                 margin: 0 !important;
  82.                 /*transform: translate(366px, 140px);*/
  83.         }
  84. </style>

网上实现的demo挺多的，这里主要是使用

  1. transform: translate(x,y)来实现移动

发表评论

表情：
评论列表 （有 0 条评论，388人围观）

还没有评论，来说两句吧...

相关阅读