自定义可拖动弹窗宽度指令

RuoYi

2021-08-20 e6e10308ff1e2becf7661eb96a769b0f77a9cd77

自定义可拖动弹窗宽度指令

 ruoyi-ui/src/directive/dialog/dragWidth.js

对比新文件
@@ -0,0 +1,31 @@
/**

* v-dialogDragWidth 可拖动弹窗宽度

* Copyright (c) 2019 ruoyi

*/



export default {

    bind(el) {

        const dragDom = el.querySelector('.el-dialog');

        const lineEl = document.createElement('div');

        lineEl.style = 'width: 5px; background: inherit; height: 80%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; cursor: w-resize;';

        lineEl.addEventListener('mousedown',

            function (e) {

                // 鼠标按下，计算当前元素距离可视区的距离

                const disX = e.clientX - el.offsetLeft;

                // 当前宽度

                const curWidth = dragDom.offsetWidth;

                document.onmousemove = function (e) {

                    e.preventDefault(); // 移动时禁用默认事件

                    // 通过事件委托，计算移动的距离

                    const l = e.clientX - disX;

                    dragDom.style.width = `${curWidth + l}px`;

                };

                document.onmouseup = function (e) {

                    document.onmousemove = null;

                    document.onmouseup = null;

                };

            },

        );

        dragDom.appendChild(lineEl);

    }

}

 ruoyi-ui/src/directive/index.js

@@ -1,17 +1,18 @@
import hasRole from './permission/hasRole'

import hasPermi from './permission/hasPermi'

import dialogDrag from './dialog/drag'

import dialogDragWidth from './dialog/dragWidth'



const install = function(Vue) {

  Vue.directive('hasRole', hasRole)

  Vue.directive('hasPermi', hasPermi)

  Vue.directive('dialogDrag', dialogDrag)

  Vue.directive('dialogDragWidth', dialogDragWidth)

}



if (window.Vue) {

  window['hasRole'] = hasRole

  window['hasPermi'] = hasPermi

  window['dialogDrag'] = dialogDrag

  Vue.use(install); // eslint-disable-line

}