Vue的el-scrollbar實現(xiàn)自定義滾動
為什么要用el-scrollbar?
最近在寫一個內部平臺系統(tǒng),相信大家都知道,其中會有很多自定義的滾動區(qū)域,就比如說現(xiàn)在有一個列表需要滾動,第一個念頭就是用 overflow: scroll; ??!嗯嗯,又不是不能用!如果我不曾見過太陽,我本可以忍受黑暗。
大家總會見過不少滾動條比較優(yōu)雅的實現(xiàn),不可否認,美是讓人愉悅的。所以這些年行走江湖我滿懷愧疚,讓大家見丑了。
為什么要用el-scrollbar,大家都知道,模擬一個滾動不難,而且市面上有很多這樣的庫。我考慮的,首先項目用的框架是Vue,然后用的組件庫是Element,Element官網(wǎng)也有很多滾動,而且像是Select組件的下拉框也是有滾動的,所以就不用想選擇什么了,簡簡單單的就用Element自己的scrollbar吧,也不用再引入什么別的包或者文件之類的。
看Element的官網(wǎng)是不可能發(fā)現(xiàn)Scrollbar這個組件的,沒有使用文檔,但是可以直接使用。
為什么要寫這一篇文章?
第一,有段時間沒寫東西了,先熱熱手;
第二,真的有同學不知道怎么用,可能主要是沒有文檔吧
先來看看它的樣子。
看了效果,接著來看一下怎么找到這個組件,官方?jīng)]有提供文檔,但確實是直接可用的一個組件。為什么這么說,這個一會再聊。先稍微看一下Element項目一些基本的概念。
在Element的貢獻指南里說了開發(fā)環(huán)境搭建和打包代碼的指令。打包代碼用 npm run dist ,我們去package.json中可以看到這個指令具體的操作。
我們簡單看一下build/webpack.conf.js這個文件,會發(fā)現(xiàn)打包的文件入口是./src/index.js,我們再去看一下這個文件。里面內容除了包含給vue安裝插件,原型上掛載對象之類的操作外,就是用插件的方式把Element組件給注冊完成,當然也暴露出用安裝包方式安裝后要用的所有方法和屬性。其實我們已經(jīng)看到了Scrollbar的身影。再循著去看一下packages/scrollbar/index.js'這個文件,簡單的把這個組件引入后,添加了一個install方法,提供給Vue的use方法使用,然后就直接export出來了。
去src/main.js這個文件,看一下組件接收的props:
native屬性:如果為true就不顯示el的bar,也就是el模擬出來的滾動條,如果為false就顯示模擬的滾動條
關于tag這個屬性,可以看一下el的Select組件中的應用。
畫個圖表示一下view和wrap這兩個區(qū)域的區(qū)別:
嘗試用一下
考慮到有些同學有時會打不開上面的鏈接,把代碼貼出來。
HTML <script src="http://unpkg.com/vue/dist/vue.js"></script> <script src="http://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("http://unpkg.com/element-ui@2.3.9/lib/theme-chalk/index.css"); #app { height: 300px; overflow: hidden; } /*展示列表的區(qū)域,超過200px出現(xiàn)滾動條*/ .list { max-height: 200px; } JavaScript new Vue({ el: "#app", data: { num: 30 } })
Element UI官方說不準什么時候就更新文檔了,不過,真的可能是因為太簡單了。
相關文章
python怎樣判斷一個數(shù)值(字符串)為整數(shù)
這篇文章主要介紹了python怎樣判斷一個數(shù)值(字符串)為整數(shù)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02pycharm創(chuàng)建django項目出現(xiàn)路徑錯誤問題
在PyCharm中創(chuàng)建Django項目時,若使用之前項目的環(huán)境編譯器,且已修改其根目錄,則新建項目路徑可能出錯。解決辦法是在設置中選擇Project,通過齒輪圖標進入Show?All,選擇編譯器路徑,點擊筆形圖修改Development?configuration的Root?path為/,以確保新項目能正確創(chuàng)建2024-09-09Python?copy()與deepcopy()方法之間有什么區(qū)別
這篇文章主要介紹了Python中的copy()和deepcopy(),下面詳細介紹該內容并附上詳細代碼,需要的朋友可以參考一下文章的具體內容,希望對你有所幫助2022-10-10