vue自定义指令实现拖拽元素大小，相邻节点自适应变化

最新推荐文章于 2024-02-28 08:58:40 发布

dn_666666

最新推荐文章于 2024-02-28 08:58:40 发布

阅读量149

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lmk666__/article/details/131459285

版权

export default {
    inserted: function (el) {
        // console.log(el.parentNode);
        const dragDom = el;
        let parent = el.parentNode
        // let parentWidth = window.getComputedStyle(parent).width.slice(0,-2) * 1
        parent.style.display = "flex"
        dragDom.style.cursor = "e-resize";
        dragDom.onmousedown = (e) => {
            // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX
            const w = dragDom.clientWidth
            const minW = 240
            const maxW = 600 
            var nw 
            document.onmousemove = function(e) {
                // 通过事件委托，计算移动的距离
                const l = e.clientX - disX
                // 改变当前元素宽度，不可超过最小最大值
                nw = w + l
                nw = nw < minW ? minW : nw
                nw = nw > maxW ? maxW : nw
                // if(dragDom.style.width >= parentWidth / 2) return
                dragDom.style.width = `${nw}px`
            }
    
            document.onmouseup = function(e) {
                document.onmousemove = null
                document.onmouseup = null
            }
        }
    }
}