在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>