1.下载simplebar-vue
npm install simplebar-vue --save
2.引入注册
import simplebar from "simplebar-vue";
import 'simplebar-vue/dist/simplebar.min.css'
import 'simplebar-vue/dist/simplebar-vue.js'
vue2的版本基础上 【引入注册】
import simplebar from "simplebar-vue";
import "simplebar/dist/simplebar.min.css";
会报错
需要改成
import simplebar from "simplebar-vue";
import 'simplebar-vue/dist/simplebar.min.css'
import 'simplebar-vue/dist/simplebar-vue.js'
使用如下
<div class="middleTags"><!-- 加上data-simplebar标明这个是滚动条的容器，以便于组件实现滚动效果 --><!-- data-simplebar-auto-hide="true"设置自动隐藏 --><div data-simplebar data-simplebar-auto-hide="true"><!-- 使用组件标签simplebar包裹住内容区即可 --><simplebar><div class="tagsBox"><el-tag:type="route.path === '/home/index' ? 'success' : 'info'"class="pointer selfClass"@click="handleClick({ path: '/home/index' })">首页</el-tag><el-tag:type="item.name == route.name ? 'success' : 'info'"class="pointer selfClass"v-for="(item, index) in userStore.visitedViews":key="item.name"closable@click="handleClick(item)"@close="handleClose(item)">{{ item.meta.title }}</el-tag></div></simplebar></div></div>
参考文档：https://zhuanlan.zhihu.com/p/590671292
参考文档：https://cloud.tencent.com/developer/ask/sof/957899/answer/1360060
