在Vue項目中使用easyScroll滾動條插件

插件github地址：https://github.com/GarveyZuo/EasyScroll/

1.插件採用jsx語法，使用前需要安裝vue-jsx插件：

npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  babel-preset-es2015\
  --save-dev

2.更改.babelrc文件

{
  "presets": [
    ["es2015", { "modules": false }],
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "plugins": ["transform-vue-jsx"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

3.安裝使用插件

npm isntall --save easyscroll

main.js中：

import EasyScroll from 'easyscroll';
Vue.use(EasyScroll);

4.簡單應用

<EasyScrollbar>
        <div  id="wrapper" style="height: 300px;">
          <div style="height: 500px;background-color: greenyellow;text-align: center;">
            最簡單的應用
          </div>
        </div>
</EasyScrollbar>

5.滾動條主要參數

opt:{
  barColor:"#959595",   //滾動條顏色
  barWidth:6,           //滾動條寬度
  railColor:"#eee",     //導軌顏色
  barMarginRight:0,     //垂直滾動條距離整個容器右側距離單位（px）
  barMaginBottom:0,     //水平滾動條距離底部距離單位（px)
  barOpacityMin:0.3,      //滾動條非激活狀態下的透明度
  zIndex:"auto",        //滾動條z-Index
  autohidemode:true,     //自動隱藏模式
  horizrailenabled:true,//是否顯示水平滾動條
}

使用

<EasyScrollbar :barOption="myBarOption">
   <div>
     <div>
       內容
     </div>
   </div>
</EasyScrollbar>
<script>
   data{
     return{
       data(){
         myBarOption:{
           barColor:"red"
         }
       }
     }
   }
</script>