一、vue3-perfect-scrollbar
Vue2使用教程请前往:Vue2实用组件集
1、介绍
Vue.js 简约但功能强大的完美滚动条包装器
2、功能
优化滚动条显示
3、安装
npm install vue3-perfect-scrollbar
4、使用
1)全局注册
import PerfectScrollbar from 'vue3-perfect-scrollbar'
import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css'
app.use(PerfectScrollbar)
2)代码中使用
<perfect-scrollbar>
内容
</perfect-scrollbar>
该插件会生成一个类名为“.ps”的容器,需要自定义容器的高度
.ps {
height: 400px;
}
3)例子
<template>
<div>
<perfect-scrollbar>
<p v-for="item in 10">{
{ item }}</p>
</perfect-scrollbar>
</div>
</template>
<script>
export default {
name: "index",
};
</script>
<style>
.ps {
height: 200px;
}
</style>
4)效果