美化滚动条的一个插件 vue3-perfect-scrollbar
使用步骤:1.安装#npmnpm install vue3-perfect-scrollbar#yarnyarn add vue3-perfect-scrollbar2.使用#在main.tsimport { createApp } from 'vue'import App from './App.vue'//引入import PerfectScrollbar from 'vue3-perfect
·
使用步骤:
1.安装
#npm
npm install vue3-perfect-scrollbar
#yarn
yarn add vue3-perfect-scrollbar
2.使用
#在main.ts
import { createApp } from 'vue'
import App from './App.vue'
//引入
import PerfectScrollbar from 'vue3-perfect-scrollbar'
import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css'
const app = createApp(App)
app.use(PerfectScrollbar)
app.mount('#app')
在你需要使用的容器外面包裹一层:
<perfect-scrollbar >
< p > Lorem Ipsum 简直就是印刷排版行业的虚拟文本。</ p >
</perfect-scrollbar>
这时,这个插件会生成一个".ps"类名的容器,你需要自定义容器高度
/*示例*/
.ps{
height:400px
}
效果图如下:(鼠标移入出现滚动条,移出隐藏滚动条)
具体其他详情,请查看github地址: vue3-perfect-scrollbar
更多推荐
已为社区贡献4条内容
所有评论(0)