注册 登录
  • 欢迎访问"运维那点事",推荐使用Google浏览器访问,可以扫码关注本站的"微信公众号"。
  • 如果您觉得本站对你有帮助,那么可以扫码捐助以帮助本站更好地发展。

Vue使用perfect-scrollbar滚动条插件

Vue 彭东稳 912次浏览 已收录 0个评论

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

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

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

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

定义一下 css 样式:

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


如果您觉得本站对你有帮助,那么可以支付宝扫码捐助以帮助本站更好地发展,在此谢过。
喜欢 (0)or分享 (0)
关于作者:

您必须 登录 才能发表评论!