vue scrollbar,vue中div出现滚动条
这篇文章主要介绍了某视频剪辑软件中使用vue 2-完美滚动条滚动条，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
官方地址：https://github。com/mercs 600/vue 2-完美滚动条
下载：
cnpm I-S vue 2-完美滚动条
主页。射流研究…中引用：
从“vue 2-完美滚动条"导入完美滚动条
导入vue 2-完美滚动条/距离/vue 2-完美滚动条。 CSS
Vue.use(完美滚动条)
使用：
模板
div class=闪开
div class=侧标题
图片
src= https://LJ-通用。成都OSS-。阿里云。com/vue。巴布亚新几内亚
style= width:30px；高度：30px
/
跨度
style=
字体大小：20px
字体粗细：600;
颜色：白色；
左边距：10px
xxx/span
/div
div class=侧菜单
完美滚动条@ PS-scroll-y= on scroll ref=滚动条
埃尔菜单
默认活动=1
El-菜单-垂直-演示
background-color=#191A23
text-color=#fff
active-text-color=white
El-menu-item index= 1 @ click= $ router。推送({ path:/download })
span slot=title 演示/span
/El-菜单项
埃尔-菜单项index= 3 span slot= title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span
/El-菜单项
埃尔-菜单项index= 3 span slot= title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span/El-菜单项
埃尔菜单项索引=3
span slot=title 测试/span
/El-菜单项
El-menu-item index= 2 @ click= $ router。push({ path:/test })
span slot=titletest1/span
/El-菜单项
/el-menu
/完美-滚动条
/div
/div
/模板
脚本
导出默认值{
data() {
return { }；
},
方法：{
onScroll(事件){
console.log(这个. refs $ scroll bar . PS，event)；
},
},
观察：{
//路由改变时，滚动条回到顶部
$route() {
这个参考文献。滚动条。$ El。scroll top=0；
},
},
};
/脚本
样式lang=scss 范围。靠边站
身高：100vh。侧标题{
高度：60px
背景色：# 545c64
行高：60px
显示器：flex
对齐-项目：居中；
对齐-内容：居中；
}。侧边菜单{
高度：calc(100 VH-60px)；
背景色：# 0b6dd0
//展开时宽度。El-菜单-垂直-演示：不是(。埃尔-菜单-折叠){
宽度：256像素
}。埃尔-菜单{
身高：100%;
边框：0!重要；//垂直时，去除右侧白边
}
//完美滚动条默认的类名。自定义滚动条内容区域高度。ps {
身高：100%;
}
}
}
/风格
到此这篇关于某视频剪辑软件中使用vue 2-完美滚动条滚动条的文章就介绍到这了，更多相关vue 2-完美滚动条滚动条内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。