Vue使用perfect-scrollbar滚动条插件

在使用 iview 过程中，给 card 组件添加滚动条，刚开始使用 css 中的 overflow ，发现对于 iview 不是太好用，不管超没超出范围都会有一个滚动框。后来在前端同事的帮助下，知道了这款名为完美滚动条的插件，安装和使用完美滚动条的最佳方法是使用 npm 。

$ npm install perfect-scrollbar

1	$ npm install perfect-scrollbar

下面记录一下再 iview 页面组件中使用 perfect-scrollbar。首先引入实例及 css 样式。

<script>
  import PerfectScrollbar from 'perfect-scrollbar'
  import 'perfect-scrollbar/css/perfect-scrollbar.css'
</script>

import PerfectScrollbar from 'perfect-scrollbar'

import 'perfect-scrollbar/css/perfect-scrollbar.css'

</script>

然后在 mount 方法或自定义方法中创建一个新的实例（vue组件初始化时执行的钩子函数）：

const Ps = new PerfectScrollbar('.demo-split-pane', {
    wheelPropagation: false
})

const Ps = new PerfectScrollbar('.demo-split-pane', {

wheelPropagation: false

})

其中 .demo-split-pane 是你挂载的类名（我这里是 card 组件的类名），然后后面是一个对象，有很多参数可以定义，可参考这篇文章。

定义一下 css 样式：

<style lang="less">
  .demo-split-pane{
    position: relative;
    height: 100%;
    overflow: hidden;
  }
</style>

.demo-split-pane{

position: relative;

height: 100%;

overflow: hidden;

}

</style>

需要注意，你的父元素也需要 height 为 100%。

如果您觉得本站对你有帮助，那么可以支付宝扫码捐助以帮助本站更好地发展，在此谢过。