怎么在Vue中利用el-scrollba自定義滾動

怎么在Vue中利用el-scrollba自定義滾動？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

在Element的貢獻指南里說了開發環境搭建和打包代碼的指令。打包代碼用 npm run dist ,我們去package.json中可以看到這個指令具體的操作。

我們簡單看一下build/webpack.conf.js這個文件，會發現打包的文件入口是./src/index.js,我們再去看一下這個文件。里面內容除了包含給vue安裝插件，原型上掛載對象之類的操作外，就是用插件的方式把Element組件給注冊完成，當然也暴露出用安裝包方式安裝后要用的所有方法和屬性。其實我們已經看到了Scrollbar的身影。再循著去看一下packages/scrollbar/index.js'這個文件，簡單的把這個組件引入后，添加了一個install方法，提供給Vue的use方法使用，然后就直接export出來了。

去src/main.js這個文件，看一下組件接收的props:

native屬性：如果為true就不顯示el的bar，也就是el模擬出來的滾動條，如果為false就顯示模擬的滾動條

關于tag這個屬性，可以看一下el的Select組件中的應用。

畫個圖表示一下view和wrap這兩個區域的區別：

嘗試用一下

考慮到有些同學有時會打不開上面的鏈接，把代碼貼出來。

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.3.9/lib/index.js"></script>
<div id="app">
 <h3>list:</h3>
 <el-scrollbar wrap-class="list" wrap- view- view-class="view-box" :native="false">
 <div v-for="value in num" :key="vlaue">
  {{value}}
 </div>
 </el-scrollbar>
</div>


CSS

@import url("//unpkg.com/element-ui@2.3.9/lib/theme-chalk/index.css");
#app {
 height: 300px;
 overflow: hidden;
}
/*展示列表的區域，超過200px出現滾動條*/
.list {
 max-height: 200px;
}


JavaScript

new Vue({
 el: "#app",
 data: {
 num: 30
 }
})

看完上述內容，你們掌握怎么在Vue中利用el-scrollba自定義滾動的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！