element-ui Dialog 对话框可拖拽

搬砖的小白

已于 2022-08-22 11:38:12 修改

阅读量215

点赞数

分类专栏： element-ui使用心得文章标签： ui vue.js

于 2022-08-22 11:34:37 首次发布

本文链接：https://blog.csdn.net/weixin_43805439/article/details/126462637

版权

1.在utils中新建 dialogDrag.js

import Vue from 'vue'
// v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', {
   
  bind (el, binding, vnode) {
   
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    dialogHeaderEl.style.cssText += ';cursor:move;'
    dragDom.style.cssText += ';top:0px;'

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const getStyle = (function () {
   
      if (window.document.currentStyle) {
   
        return (dom, attr) => dom.currentStyle[attr]
      } else {
   
        return