美文网首页
el-dialog添加全局拖动v-drag指令

el-dialog添加全局拖动v-drag指令

作者: royluck | 来源:发表于2020-11-09 19:50 被阅读0次

路径:src/utils/directives.js

export default (Vue)=>{
  Vue.directive("drag", {
    inserted: function (el) {
      let odiv = el;   //获取当前元素
      let flag = false;
      const elDialog = odiv.getElementsByClassName('el-dialog')[0]
      elDialog.getElementsByClassName('el-dialog__header')[0].style.cursor = 'move'
      odiv.onmousedown = (e) => {
        if(e.target.className !== 'el-dialog__header'){
          return
        }
        e.preventDefault();
        flag = true
        //算出鼠标相对元素的位置
        let disX = e.clientX - elDialog.offsetLeft;
        let disY = e.clientY - elDialog.offsetTop;

        odiv.onmousemove = (e)=>{
          e.preventDefault();
          if(!flag){
            return false
          }
          //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置
          let left = e.clientX - disX;
          let top = e.clientY - disY;

          //移动当前元素
          elDialog.style.left = left + 'px';
          elDialog.style.top = top + 'px';
          elDialog.style.margin = "0px";
          elDialog.style.marginTop = "0px";

        };
        odiv.onmouseup = (e) => {
          e.preventDefault();
          if(!flag){
            return false
          }
          odiv.onmousemove = null;
          odiv.onmouseup = null;
        };
      };
    }
  })
}


路径:src/main.js

import directives from '@/utils/directives.js'
Vue.use(directives)
<!--告警详情 弹窗-->
    <el-dialog
      v-bind="detailDialogOption"
      top="10vh"
      :modal-append-to-body="detailDialogOption.modalAppendToBody"
      :append-to-body="detailDialogOption.appendToBody"
      :view.sync="detailDialogOption.view"
      :visible.sync="detailDialogOption.show" v-drag>
      <component
        v-if="detailDialogOption.show"
        :is="detailDialogOption.view"
        :data="detailDialogOption.data"
        :visible.sync="detailDialogOption.show"
        @close="detailDialogOption.show = false"></component>
    </el-dialog>

相关文章

  • el-dialog添加全局拖动v-drag指令

    路径:src/utils/directives.js 路径:src/main.js

  • 24. 插件

    插件通常为vue添加全局功能,一般有以下几种: 添加全局方法或者属性 添加全局资源——指令,过滤器,过渡等等 通过...

  • vue中实现div自由拖拽

    给div绑定一个自定义指令v-drag 给div设置绝对定位 写自定义指令 //自定义指令 directives:...

  • 6.自定义指令directives

    1.定义全局指令在main.js中声明全局指令 在元素中使用自定义指令 2.局部指令直接在当前组件中添加direc...

  • vue插件学习

    vue的插件通常是用来添加全局功能, 插件按功能分一般有: 1、添加全局方法或属性 2、添加全局属性:指令、过滤器...

  • vue实现弹窗拖拽

    使用方法:在需拖拽功能的元素上添加v-drag启用: 在不需拖拽的元素上添加v-stopdrag阻止:

  • Vue基础(五)--自定义指令与过渡

    1.自定义指令 分类:全局指令、局部指令 1.1 自定义全局指令 使用全局方法 Vue.directive(指令I...

  • Vue之自定义指令

    分类:全局指令、局部指令 1、自定义全局指令 使用全局方法Vue.directive(指令ID,定义对象) 注:使...

  • 修改ElementUI DIialog弹窗样式,并可拖动

    实现效果: 实现可拖动:新建dialog.js ,在main.js中引入,在

  • HTML笔记16:HTML5拖放

    拖动事件 拖动实例 拖动元素添加属性 拖动我! 定义拖动ondragstart 设置目标释放后,放置的位置ondr...

网友评论

      本文标题:el-dialog添加全局拖动v-drag指令

      本文链接:https://www.haomeiwen.com/subject/wjjrbktx.html