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

RuoYi

2021-08-20 d1ef19f08a2cf9faa202f330798c7e6f822bb722

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

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

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

* v-dialogDragWidth 可拖动弹窗高度（右下角）

* Copyright (c) 2019 ruoyi

*/



export default {

    bind(el) {

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

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

        lineEl.style = 'width: 6px; background: inherit; height: 10px; position: absolute; right: 0; bottom: 0; margin: auto; z-index: 1; cursor: nwse-resize;';

        lineEl.addEventListener('mousedown',

            function(e) {

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

                const disX = e.clientX - el.offsetLeft;

                const disY = e.clientY - el.offsetTop;

                // 当前宽度 高度

                const curWidth = dragDom.offsetWidth;

                const curHeight = dragDom.offsetHeight;

                document.onmousemove = function(e) {

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

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

                    const xl = e.clientX - disX;

                    const yl = e.clientY - disY

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

                    dragDom.style.height = `${curHeight + yl}px`;

                };

                document.onmouseup = function(e) {

                    document.onmousemove = null;

                    document.onmouseup = null;

                };

            }, false);

        dragDom.appendChild(lineEl);

    }

}

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

@@ -1,5 +1,5 @@
/**

* v-dialogDragWidth 可拖动弹窗宽度

* v-dialogDragWidth 可拖动弹窗宽度（右侧边）

* Copyright (c) 2019 ruoyi

*/



@@ -24,8 +24,7 @@
                    document.onmousemove = null;

                    document.onmouseup = null;

                };

            },

        );

            }, false);

        dragDom.appendChild(lineEl);

    }

}

 ruoyi-ui/src/directive/index.js

@@ -2,12 +2,14 @@
import hasPermi from './permission/hasPermi'

import dialogDrag from './dialog/drag'

import dialogDragWidth from './dialog/dragWidth'

import dialogDragHeight from './dialog/dragHeight'



const install = function(Vue) {

  Vue.directive('hasRole', hasRole)

  Vue.directive('hasPermi', hasPermi)

  Vue.directive('dialogDrag', dialogDrag)

  Vue.directive('dialogDragWidth', dialogDragWidth)

  Vue.directive('dialogDragHeight', dialogDragHeight)

}



if (window.Vue) {