直播平台开发，伸缩式菜单，随意调整菜单栏横向的大小

直播平台开发，伸缩式菜单，随意调整菜单栏横向的大小实现的相关代码

 

1

/*拖拽区div样式*/<br>.resize {<br>    cursor: col-resize;<br>    position: relative;<br>    // top: 45%;<br>    top: 400px;<br>    <br>    border-radius: 5px;<br>    margin-top: -10px;<br>    width: 10px;<br>    height: 50px;<br>    background-size: cover;<br>    background-position: center;<br>    font-size: 32px;<br>    color: white;<br>}<br>/*拖拽区鼠标悬停样式*/<br>.resize:hover {<br>    color: #444444;<br>}<br>//左侧菜单设置百分比宽度，方便拖拽自适应<br>.main_menu {<br>    width:22%; /*右侧初始化宽度*/<br>    height: 100%;<br>    background: #BF334E!important;<br>    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.11);<br>}

​

methods里面的拖拽函数：

 

1

// 拖拽事件<br>        dragControllerDiv() {<br>            var resize = document.getElementsByClassName('resize')<br>            var left = document.getElementsByClassName('left')<br>            var mid = document.getElementsByClassName('mid')<br>            var box = document.getElementsByClassName('box')<br>            for (let i = 0; i < resize.length; i++) {<br>                // 鼠标按下事件<br>                resize[i].onmousedown = function (e) {<br>                    //颜色改变提醒<br>                    resize[i].style.background = '#818181'<br>                    var startX = e.clientX<br>                    resize[i].left = resize[i].offsetLeft<br>                    // 鼠标拖动事件<br>                    document.onmousemove = function (e) {<br>                        console.log('鼠标按下')<br>                        var endX = e.clientX<br>                        var moveLen = resize[i].left + (endX - startX - 270) // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度<br>                        var maxT = box[i].clientWidth - resize[i].offsetWidth - 270// 容器宽度 - 左边区域的宽度 = 右边区域的宽度<br>                        console.log(moveLen,maxT)<br>                        if (moveLen < 32) moveLen = 270 // 左边区域的最小宽度为32px<br>                        if (moveLen > maxT - 150) moveLen = maxT - 650 //右边区域最小宽度为150px<br>                        resize[i].style.left = moveLen // 设置左侧区域的宽度<br>                        for (let j = 0; j < left.length; j++) {<br>                            console.log( left[j].style)<br>                            left[j].style.width = moveLen + 'px'<br>                            mid[j].style.width = box[i].clientWidth - moveLen - 10 + 'px'<br>                        }<br>                    }<br>                    // 鼠标松开事件<br>                    document.onmouseup = function (evt) {<br>                        console.log('鼠标收起')<br>                        //颜色恢复<br>                        resize[i].style.background = '#d6d6d6'<br>                        document.onmousemove = null<br>                        document.onmouseup = null<br>                        resize[i].releaseCapture && resize[i].releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉<br>                    }<br>                    resize[i].setCapture && resize[i].setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获<br>                    return false<br>                }<br>            }<br>        },

 

mounted里面调用：

 

1	mounted() {<br>         this.dragControllerDiv()<br>    },<br>suoh's Blog

 

以上就是直播平台开发，伸缩式菜单，随意调整菜单栏横向的大小实现的相关代码， 更多内容欢迎关注之后的文章