Vue3实用组件集

一、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）效果