vue3 使用simplebar【滚动条】

m0_52611940

已于 2023-11-21 09:35:10 修改

阅读量1k

点赞数

文章标签： vue.js

于 2023-11-21 09:34:09 首次发布

本文链接：https://blog.csdn.net/m0_52611940/article/details/134503081

版权

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