兰宝车间质量管理系统
blame | 历史 | 补丁 | 提交 | 提交对比 | 显示空白
疯狂的狮子li
2021-08-22 0c9a77873628ffa6d100ea775fe6be627b50c894 
 ruoyi-ui/src/directive/dialog/dragWidth.js


¶Ô±ÈÐÂÎļþ


@@ -0,0 +1,30 @@


/**



* 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;



                };



            }, false);



        dragDom.appendChild(lineEl);



    }



}