vue-框架下自定义滚动条easyscroll实现

增加一个自定义滚动条插件：

// 插件采用 jsx 语法，使用前需要安装 vue-jsx 插件
npm install babel-plugin-syntax-jsx --save-dev
npm install babel-plugin-transform-vue-jsx --save-dev
npm install babel-helper-vue-jsx-merge-props --save-dev
npm install babel-preset-es2015 --save-dev

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

// 安装使用插件
npm isntall --save easyscroll

//main.js 中
import EasyScroll from 'easyscroll';
Vue.use(EasyScroll);

// 滚动条主要参数
myBarOption:{
  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>

// 后台搭建代码参考
<template>
  <div id="app">
    <router-view class="frameTop" name="top"/>
    <router-view class="frameMenu" name="menus"/>
    <EasyScrollbar class="frameMain" :barOption="myBarOption">
      <div class="organization" :style="'height:'+scrollHeight+'px'">
        <router-view></router-view>
      </div>
    </EasyScrollbar>
  </div>
</template>

<script>
export default {data(){
    return {
      scrollHeight: 0,         //EasyScrollbar 的直接子元素的高度
      myBarOption: {
        barColor:"#959595",   // 滚动条颜色
        barWidth:6,           // 滚动条宽度
        railColor:"#eee",     // 导轨颜色
        barMarginRight:0,     // 垂直滚动条距离整个容器右侧距离单位（px）barMaginBottom:0,     // 水平滚动条距离底部距离单位（px)
        barOpacityMin:0.3,      // 滚动条非激活状态下的透明度
        zIndex:"auto",          // 滚动条 z -Index
        autohidemode:true,     // 自动隐藏模式
        horizrailenabled:true,// 是否显示水平滚动条
      }
    }
  },
  created: function() {this.init();
  },
  methods:{init: function() {
      // 初始化时计算页面核心模块得高度，并赋值给 EasyScrollbar 的直接子元素
      this.scrollHeight = document.documentElement.clientHeight-50;
    }
  }
}

</script>

<style>
@import "./assets/css/base.css";
@import "./assets/css/frame.css";
</style>