vue 設置滾動條 ant design vue

ant design vue組件中沒有關於滾動條的設置

• 這篇文章介紹了怎么設置滾動條https://www.cnblogs.com/home-/p/12195761.html
• 插件官網：https://vuescrolljs.yvescoding.org/zh/demo/

內容如下

安裝模塊：
npm install vuescroll

main.js中引入：
import vuescroll from "vuescroll";//引入vuescroll
import "vuescroll/dist/vuescroll.css";//引入vuescroll樣式
Vue.use(vuescroll);//使用

<!-- 設置寬高然后進行配置 -->
<vue-scroll :ops="ops" style="width:100%;height:100%">
     省去內容......
</vue-scroll>

data中：
 ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          keepShow: true
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滾動的時候才顯示滾動條
          background: "#F5F5F5",//滾動條顏色
          opacity: 0.5,//滾動條透明度
          "overflow-x": "hidden"
        }
      }

style中：
// 滾動條位置
/deep/.__bar-is-vertical {
  right: -1px !important;
}
// 隱藏橫向滾動條
/deep/.__bar-is-horizontal {
  display: none !important;
}