项目中很多时候需要弹出框可以拖动并且可最大化，el-dialog是不满足的，这边采用指令的方式进行拓展。

先来个效果图：

首先来个v-darg指令：

1 import Vue from 'vue'
2
3 Vue.directive('alterELDialogMarginTop', {
4 inserted(el, binding, vnode) {
5 el.firstElementChild.style.marginTop = binding.value + 'px'
6 }
7 })
8
9 Vue.directive('alterELDialogMarginLeft', {
10 inserted(el, binding, vnode) {
11 el.firstElementChild.style.marginLeft = binding.value + 'px'
12 }
13 })
14
15 Vue.directive('drag', {
16 inserted(el, binding, vnode) {
17 let odiv = el.getElementsByTagName('div')[0];
18 let headerDiv = odiv.getElementsByTagName('div')[0];
19 const deepHeader = headerDiv.querySelector('header');
20 const flag = elementContains(headerDiv, deepHeader); //兼容dialog&&drawer
21 if(flag) {
22 headerDiv = deepHeader;
23 }
24 headerDiv.onmousedown = e => {
25 // document.body.style.userSelect = 'none';
26 // document.body.style.webkitUserSelect = 'none';
27 // document.body.style.msUserSelect = 'none';
28 // document.body.style.mozUserSelect = 'none';
29 // let odiv = el.getElementsByTagName('div')[0];
30 let disX = e.clientX - odiv.offsetLeft;
31 let disY = e.clientY - odiv.offsetTop;
32 document.onmousemove = e => {
33 let left = e.clientX - disX;
34 let top = e.clientY - disY;
35 odiv.style.marginLeft = left + 'px';
36 odiv.style.marginTop = top + 'px';
37 };
38 document.onmouseup = e => {
39 document.onmousemove = null;
40 document.onmouseup = null;
41 // document.body.style.userSelect = 'auto';
42 // document.body.style.webkitUserSelect = 'auto';
43 // document.body.style.msUserSelect = 'auto';
44 // document.body.style.mozUserSelect = 'auto';
45 };
46 };
47 }
48 })
49
50 const elementContains = (parent, child) => parent !== child && parent.contains(child);

再来个v-fullscreen指令：

1 import Vue from 'vue'
2
3 function handleFullScreen(dialog, isFullScreen, marginTop, width) {
4 if (!dialog) return false
5 if (isFullScreen) {
6 dialog.style.marginTop = '0'
7 dialog.style.marginLeft = '0'
8 dialog.style.position = 'absolute'
9 dialog.style.top = '0px'
10 dialog.style.bottom = '0px'
11 dialog.style.left = '0px'
12 dialog.style.width = '100%'
13 } else {
14 // dialog.style.marginTop = marginTop
15 dialog.style.margin = '0 auto'
16 dialog.style.width = width
17 dialog.style.position = 'relative'
18 }
19 }
20
21 Vue.directive('fullScreen', {
22 bind(el, binding, vnode) {
23 let isFullScreen = false
24
25 const dialog = el.querySelector('.el-dialog')
26 const header = el.querySelector('.el-dialog__header')
27 if (!header || !dialog || !vnode) return
28 header.style.paddingRight = '43px'
29 header.style.boxShadow = '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
30 const {
31 width,
32 top
33 } = vnode.componentInstance
34
35 const fullScreenBtn = document.createElement('button')
36 fullScreenBtn.type = 'button'
37 fullScreenBtn.style =
38 'padding:0;background: 0 0;border:0;outline:0;cursor:pointer;font-size:17px;top:14px;right:38px;position:absolute;color:white;'
39
40 const fullScreenIcon = document.createElement('i')
41 fullScreenIcon.className = 'el-icon el-icon-full-screen'
42 fullScreenBtn.append(fullScreenIcon)
43
44 fullScreenBtn.addEventListener('click', () => {
45 isFullScreen = !isFullScreen
46 handleFullScreen(dialog, isFullScreen, top, width)
47 return false
48 })
49
50 header.append(fullScreenBtn)
51
52 header.addEventListener('dblclick', () => {
53 isFullScreen = !isFullScreen
54 handleFullScreen(dialog, isFullScreen, top, width)
55 return false
56 })
57 }
58 })

集成el-dialog，（这个封装里面稍微做了一点对于移动端和pc端的尺寸响应，不需要可以去掉）：

1
22
23
99
100

最后直接调用LiloResponsiveDialog组件即可，而我这里是做成了插件。

1 import ResponsiveDialog from './src/main';
2
3 /* istanbul ignore next */
4 ResponsiveDialog.install = function(Vue) {
5 Vue.component(ResponsiveDialog.name, ResponsiveDialog);
6 };
7
8 export default ResponsiveDialog;