elementui拖拽对话框_elementUI 弹出框添加可自定义拖拽和拉伸功能，并处理边界问题...

开发完后台管理系统的弹出框模块，被添加拖拽和拉伸功能，看了很多网上成熟的帖子引到项目里总有一点问题，下面是根据自己的需求实现的步骤：

首先在vue项目中创建一个js文件eg：dialog.js

import Vue from 'vue'

// v-dialogDrag: 弹窗拖拽属性

Vue.directive('dialogDrag', {

bind (el, binding, vnode, oldVnode) {

// 自定义属性，判断是否可拖拽

if (!binding.value) return

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 sty = (function () {

if (document.body.currentStyle) {

// 在ie下兼容写法

return (dom, attr) => dom.currentStyle[attr]

} else {