vue拖拽调整宽度指令

最新推荐文章于 2024-04-30 10:17:50 发布

JOKERJZJ

最新推荐文章于 2024-04-30 10:17:50 发布

阅读量676

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/JOKERJZJ/article/details/129992734

版权

Vue.directive(
‘catlogDragResize’, {
bind: function (el, binding) {
const dragbar = el.querySelector(‘.dragbar’);

        dragbar.onmousedown = (e) => {
            // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX
            const w = el.clientWidth
            const minW = 0
            const maxW = 500
            var nw
            document.onmousemove = function (e) {
                // 通过事件委托，计算移动的距离
                const l = e.clientX - disX
                // 改变当前元素宽度，不可超过最小最大值
                nw = w + l
                nw = nw < minW ? minW : nw
                nw = nw > maxW ? maxW : nw
                el.style.width = `calc(0px + ${nw}px)`

                if (nw < 140) {
                    store.commit('SET_HIDE_CATLOG', true)
                } else {
                    store.commit('SET_HIDE_CATLOG', false)
                }
                if (binding.arg) {
                    // 兼容小屏幕宽度超出问题
                    if (nw <= 60) {
                        document.getElementById('rightContainer').style.marginLeft = `0`
                    } else {
                        document.getElementById('rightContainer').style.marginLeft = `calc(0px + ${nw + 3}px)`
                    }
                }
            }
            document.onmouseup = function () {
                document.onmousemove = null
                document.onmouseup = null
            }

        };
    },
    // update(el, binding) {
    //     if (!binding.value.contentShow) {
    //         el.style.marginLeft = -el.offsetWidth + 'px';
    //     } else {
    //         el.style.marginLeft = '0px';
    //     }
    // },
}

)