vue实现下拉菜单,左侧菜单栏折叠vue
本文主要详细介绍了vue实现伸缩菜单的功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享了vue的伸缩菜单的具体代码，供大家参考。具体情况如下
先看效果：
单击图片按钮调整菜单宽度。
膨胀后
页面结构分为三个部分，加上一个伸缩按钮，类名添加到你的项目的相应部分。
我在这里定义的是框，左，中间和调整大小(按钮类名)
超文本标记语言
页面结构划分后，完善样式(直接复制，把菜单类名改成你的)
/*拖放区的div样式*/。调整大小{
光标：列-调整大小；
位置：相对；
//top:45%；
顶配：400px
背景色：# d6d6d6
边框半径：5px
页边距-顶部：-10px；
宽度：10px
高度：50px
背景-尺寸：封面；
背景-位置：中心；
字体大小：32px
颜色：白色；
}
/*拖放区鼠标悬停样式*/。调整大小：悬停{
颜色：# 444444；
}
//左侧菜单设置百分比宽度，方便拖拽适配。主菜单{
宽度：22%；/*右侧初始化宽度*/
身高：100%；
背景：#BF334E！重要；
box-shadow: 0px 0px 0px 0px rgba(0，0，0，0.11)；
}
方法中的拖放功能：
//拖动事件
dragControllerDiv() {
var resize=document . getelementsbyclassname( resize )
var left=document . getelementsbyclassname( left )
var mid=document . getelementsbyclassname( mid )
var box=document . getelementsbyclassname( box )
for(设I=0；我调整大小.长度；i ) {
//鼠标按下事件
调整[i]的大小。onmousedown=function (e) {
//颜色变化提醒
resize[I]. style . background= # 818181
var startX=e.clientX
调整[i]的大小。left=调整大小[i]。获取
//鼠标拖动事件
document . onmousemove=function(e){
Console.log(“鼠标按下”)
var endX=e.clientX
Var len=resize [i]。left(endx-startx-270)//(endx-startx)=移动距离。调整[i]的大小。向左移动的距离=左侧区域的最后宽度。
Maxt=box [I]。clientwidth-resize [I]。offsetwidth-270//容器宽度-左侧区域宽度=右侧区域宽度
console.log(moveLen，maxT)
If (moveLen 32) moveLen=270 //左侧区域的最小宽度为32px
if(movelen maxt-150)movelen=maxt-650//右侧区域的最小宽度为150像素
Resize[i].style.left=moveLen //设置左侧区域的宽度
for(设j=0；j left.lengthj ) {
console.log( left[j].风格)
left[j].style.width=moveLen px
mid[j].style.width=box[i]。客户端宽度-移动长度- 10 像素
}
}
//鼠标释放事件
document . onmouseup=function(evt){
Console.log(“鼠标抬起”)
//颜色恢复
resize[I]. style . background= # d6d6d 6
document.onmousemove=null
document.onmouseup=null
调整[i]的大小。释放捕获调整大小[i]。releasecapture()//当不再需要继续获取鼠标消息时，应该调用release capture()将其释放。
}
调整[i]的大小。setCapture调整大小[i]。set capture()//此函数在属于当前线程的指定窗口中设置鼠标捕获。
返回false
}
}
},
安装内线电话：
已安装(){
this.dragControllerDiv()
},
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。