el-dialog弹窗的拖拽和全屏——封装全局自定义指令

自定义指令的封装

import Vue from 'vue';
/*
* 定义公共js里，在入口文件main.js中import；
* 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。
*/
// v-dialogDrag: 弹窗拖拽+水平方向伸缩
Vue.directive('dialogDrag', {
bind(el, binding, vnode, oldVnode) {
//console.log(el, binding, vnode, oldVnode);
//弹框可拉伸最小宽高
let minWidth = 400;
let minHeight = 300;
//初始非全屏
let isFullScreen = false;
//当前宽高
let nowWidth = 0;
let nowHight = 0;
//当前顶部高度
let nowMarginTop = 0;
//获取弹框头部（这部分可双击全屏）
const dialogHeaderEl = el.querySelector('.el-dialog__header');
//弹窗
const dragDom = el.querySelector('.el-dialog');
const dragWith = dragDom.style.width;
//给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；
dragDom.style.overflow = "auto";
dragDom.style.resize = "auto";
//清除选择头部文字效果
dialogHeaderEl.onselectstart = new Function("return false"); 
//头部加上可拖动cursor
dialogH