eldialog添加拖拽功能

摘要:
importVuefrom'vue'Vue.directive('dialogDrag',{bind(el,binding,vnode,oldVnode){constdialogHeaderEl=el.querySelector('.el-dialog__header')constdragDom=el.querySelector('.el-dialog')dialogHeaderEl.style.
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'

免责声明:文章转载自《eldialog添加拖拽功能》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇如何用webpack搭建vue项目?本文案例详解Linux c 管道文件-进程间的通信 mkfifo、pipe下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Vue子组件和父组件、子组件调用父组件的方法、父组件调用子组件方法、子组件与父组件间的传值

 Vue子组件和父组件、子组件调用父组件的方法、子组件与父组件间的传值: 第一: 子组件和父组件定义:     父组件:DeptMgrTop.vue     子组件:DeptMgrBody.vue(<top-body></top-body>)和DeptMgrBodyUser.vue(<top-bodyUser><...

UE4 Subsystems

  《InsideUE4》GamePlay架构(十一)Subsystems - 知乎 (zhihu.com) 引言 非常惭愧,自从我更新完GamePlay架构十篇之后,我就断更了许久。如今说再多缘由也是借口,借着假期,在家继续重操旧业,继续写写技术文章。 UE在4.22版本的时候,开始引入Subsystems,然后在4.24完善。写本篇文章的一个原因是S...

Vue在HTML页面中的脚手架

<script src="http://t.zoukankan.com/assets/js/vue.js"></script> <script src="http://t.zoukankan.com/assets/js/vue-resource.min.js"></script>...

vue,element列表大数据卡顿问题,vue列表渲染慢,element表格渲染慢,表格渲染慢(卡),表格全选卡,使用umy-ui

https://u-leo.github.io/umy-ui/docs/index.html https://github.com/u-leo/umy-ui ### umy-ui 一套为开发者准备的基于 Vue 2.0 的桌面端组件库,完美解决表格万级数据渲染卡顿,编辑表格卡顿问题 > umy-ui叫(U米-ui)或者叫悠米-ui > um...

OpenCV 图像采样 插值 几何变换

InitLineIterator 初始化线段迭代器 int cvInitLineIterator( const CvArr* image, CvPoint pt1, CvPoint pt2, CvLineIterator* line_iterator, int connectivity=8 ); image 带采线段的输入图像. pt1 线段起始点 pt...

文件系统FatFsR0.09a翻译(三):ff.h

//本译文只供学习使用,未经作者许可,不得用于其它任何用途 //译者:xiaofeng //修改日期:2013/03/19 //版本:V1.0 //版权所有,盗版必究。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34...