vue实现侧边栏导航滑动,vue 左右滑动导航
这篇文章主要为大家详细介绍了某视频剪辑软件实现拖动左侧导航栏变大变小，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现拖动左侧导航栏变大变小的具体代码，供大家参考，具体内容如下
模板
差异
div class=top 顶部导航/div
div id=left
div id=menu
跨度左侧侧边栏/span
/div
div id=drap-line/div
/div
div id=右
右边的差异
/div
/div
/模板
style type=text/css
* {边距：0;填充：0;}
html，body { height:100%；文本对齐：居中；}
身体{位置：相对；}。顶部{宽度：100%;高度：88px背景色：# ccc}
#左侧{位置：绝对；top:88px；右：0;底部：0;左：0;宽度：220像素}
#菜单{宽度：100%;身高：100%;背景色：红色；}
# drap-line { position:absolute；top:0；右：0;宽度：4px身高：100%;背景色：# 999;光标：e-调整大小；}
#右{位置：绝对；top:88px；右：0;底部：0;左：220像素}
/风格
脚本
导出默认值{
已安装(){
//获取数字正射影像图
var drap line=文档。getelementbyid( drap-line )；
var left=文档。getelementbyid( left )；
var right=文档。getelementbyid(“right”)；
//设置最大/最小宽度
var max_width=600，
最小宽度=100
//记录鼠标相对左边的盒子x轴位置
var mouse _ x=0；
var history _ width=本地存储。getitem(滑块宽度)；
if (history_width) {
向左。风格。宽度=历史_宽度；
没错。风格。left=历史_宽度；
}
//绑定鼠标按下事件
德拉普线。onmousedown=function(e){
var e=e window.event
//阻止默认事件
e。防止默认()；
mouse _ x=e . clientx-left。offsetwidth
文档。onmousemove=function(e){
var e=e window.event
var left _ width=e . clientx-mouse _ x；
左宽=左宽最小宽度？min _ width:left _ width；
左宽=左宽最大宽度？maxwidth:left _ width；
向左。风格。width=left _ width px
没错。风格。left=left _ width px
};
文档。onmouseup=函数(e){
document.onmousemove=null
document.onmouseup=null
//本地存储设置
本地存储。setitem(滑块宽度，left.style.width)
};
}
},
方法：{
},
观察：{
},
data() {
返回{
}
}
}
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。