vue实现element-ui对话框dialog可拖拽功能

xt_XiTu

已于 2022-11-24 10:09:27 修改

阅读量678

点赞数

CC 4.0 BY-SA版权

分类专栏：功能实现 vue+element相关文章标签： vue.js elementui 前端

于 2022-11-15 10:07:20 首次发布

本文链接：https://blog.youkuaiyun.com/xt_XiTu/article/details/127860432

业务中有支持弹窗拖拽的需求，根据网上搜到的内容实现了，整理记录一下

创建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