Vue.js的自定义滚动条组件 -vue-scrollbar-custom

Vue.js的自定义滚动条组件 -vue-scrollbar-custom
插件名称 vue-scrollbar-custom
发布时间 2020年12月16日
插件作者 lfyfly

另一个组件为您的vue.js应用程序提供了高度可定制的滚动条。

安装和下载:

npm install vue-scrollbar-custom --save-dev

开始使用

参数

 props: {
    isTopBar: { // 是否为顶部滚动条
      type: Boolean,
      default: false
    },
    isHideBar: { // 是否在鼠标不在滚动区域时隐藏滚动条
      type: Boolean,
      default: false
    },
    barContainerStyle: { // 滚动条容器样式对象
      type: Object,
      default: function () {
        return {
          width: '8px',
        }
      }
    },

    barStyle: {  // 容器内滚动条样式对象
      type: Object,
      default: function () {
        return {
          width: '6px',
          borderRadius: this.isHideBar ? '3px' : '',
          background: '#ccc'
        }
      }
    },
    topBarStyle: { // 顶部滚动条样式对象(一般只设置高度和背景色)
      type: Object,
      default: function () {
        return {
          height: '3px',
          backgroundColor: '#17ce28'
        }
      }
    }
  },