vue2 pc端统一滚动条的样式使用插件 perfect-scrollbar，并且封装成指令使用，方便快捷。

要不，在试一下

于 2023-05-18 10:43:07 发布

阅读量684

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_36571836/article/details/130741839

版权

文章介绍了一个用于Vue项目的PerfectScrollbar滚动条指令的封装，需在main.js中全局注册。指令会在元素插入时检查并设置position属性，动态调整高度，并提供了初始化、更新和卸载滚动条的功能。

摘要由CSDN通过智能技术生成

指令封装文件，记得在main.js文件进行全局注册

npm install perfect-scrollbar --save 版本号如下

/*
 * @Author: 张沐阳 zhangshuyang@semi-tech.com
 * @Date: 2023-05-17 16:08:43
 * @LastEditors: 张沐阳 zhangshuyang@semi-tech.com
 * @LastEditTime: 2023-05-18 10:35:17
 * @FilePath: \company\semi-tech\fullyauto-front2.0\src\directive\perfectScroll.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import PerfectScrollbar from 'perfect-scrollbar'
import 'perfect-scrollbar/css/perfect-scrollbar.css'
const perfectScroll = {
   
  // 必须显示的设置 position: relative / absolute / fixed 和 高度 以达到滚动的条件
  // 函数节流
  // 指令所在元素被插入页面时
  inserted