Vue的自定義滾動，我用el-scrollbar

弄了一個持續更新的github筆記，能夠去看看，誠意之做（原本就是寫給本身看的……）連接地址：Front-End-Basics

此篇文章的地址：Vue的自定義滾動，我用el-scrollbar

基礎筆記的github地址：https://github.com/qiqihaobenben/Front-End-Basics ,能夠watch,也能夠star。

---

正文開始……

---

爲何要用el-scrollbar？

最近在寫一個內部平臺系統，相信你們都知道，其中會有不少自定義的滾動區域，就好比說如今有一個列表須要滾動，第一個念頭就是用 overflow: scroll; 啊！嗯嗯，又不是不能用！若是我未曾見過太陽，我本能夠忍受黑暗。

你們總會見過很多滾動條比較優雅的實現，不能否認，美是讓人愉悅的。因此這些年行走江湖我滿懷愧疚，讓你們見醜了。

爲何要用el-scrollbar，你們都知道，模擬一個滾動不難，並且市面上有不少這樣的庫。我考慮的，首先項目用的框架是Vue，而後用的組件庫是Element，Element官網也有不少滾動，並且像是Select組件的下拉框也是有滾動的，因此就不用想選擇什麼了，簡簡單單的就用Element本身的scrollbar吧，也不用再引入什麼別的包或者文件之類的。

看Element的官網是不可能發現Scrollbar這個組件的，沒有使用文檔，可是能夠直接使用。

爲何要寫這一篇文章？

• 第一，有段時間沒寫東西了，先熱熱手；
• 第二，真的有同窗不知道怎麼用，可能主要是沒有文檔吧~

先來看看它的樣子。

看了效果，接着來看一下怎麼找到這個組件，官方沒有提供文檔，但確實是直接可用的一個組件。爲何這麼說，這個一會再聊。先稍微看一下Element項目一些基本的概念。

在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這兩個區域的區別：

嘗試用一下

展現的連接：el-scrollbar試用

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

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">
  <h2>list:</h2>
  <el-scrollbar wrap-class="list" wrap-style="color: red;" view-style="font-weight: bold;" 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
  }
})

Element UI官方說不許何時就更新文檔了，不過，真的多是由於太簡單了。