vue之花里胡哨的滚动条

官网
据说官网不稳定

1下载

 npm i  vuescroll -S

2 引入

2.1 全局引入

import Vue from 'vue';
import vuescroll from 'vuescroll';

// 你可以在这里设置全局配置
Vue.use(vuescroll, {
  ops: {}, // 在这里设置全局默认配置
  name: 'myScroll' // 在这里自定义组件名字，默认是vueScroll
});

/*
 * 或者
 */

Vue.use(vuescroll); // install the vuescroll first
Vue.prototype.$vuescrollConfig = {
  bar: {
    background: '#000'
  }
};

2.2局部引入

<template>
  <vuescroll> <!-- 你的内容... --> </vuescroll>
</template>
<script>
  import vuescroll from 'vuescroll';

  export default {
    components: {
      vuescroll
    }
  };
</script>

2.3 按需导入

// 只引入 slide 模式的特性：
import vuescroll from 'vuescroll/dist/vuescroll-slide';
Vue.use(vuescroll);

// 只引入 native 模式的特性：
import vuescroll from 'vuescroll/dist/vuescroll-native';
Vue.use(vuescroll);

3 使用

我使用的是全局注册

<template>
  <div id="app">
    <myScroll :ops="ops">
      <router-view />
    </myScroll>
  </div>
</template>

这里需要注意的是在main.js中注册的vuescroll的name 那么在实例中使用的时候就是这个name
默认的name是vueScroll

4 配置

// main.js引用
import VueScroll from 'vuescroll'
Vue.use(VueScroll, {
  ops: {
    vuescroll: {},
    scrollPanel: {},
    rail: {
      keepShow: true
    },
    bar: {
      hoverStyle: true,
      onlyShowBarOnScroll: false, // 是否只有滚动的时候才显示滚动条
      background: '#ccc'
    }
  }, // 在这里设置全局默认配置
  name: 'myScroll' // 在这里自定义组件名字，默认是vueScroll
})

这是我自己的配置

需要更详细的配置可以百度或者看官网