element滾動條組件el-scrollbar的使用詳解
element官網(wǎng)文章中沒有介紹滾動條的使用方式,但是官方滾動條源碼中有滾動條的樣式代碼
樣式效果
使用方法
頁面中引入 el-scrollbar
組件
<el-scrollbar style="height: 100%"> <!-- 滾動條要包裹的內(nèi)容 --> <div class="container"> 占位</div> </el-scrollbar>
el-scrollbar
組件有以下幾個模塊的內(nèi)容:
el-scrollbar
:需要指定高度el-scrollbar__wrap
:包裹滾動區(qū)域el-scrollbar__bar is-horizontal
:橫向滾動條el-scrollbar__bar is-vertical
:縱向滾動條
如果不需要橫向滾動條(不加scoped)
<style lang="scss"> /* element滾動條組件 隱藏水平滾動條 */ .sidebar-wrapper .el-scrollbar__wrap { overflow-x: hidden; } .is-horizontal { display: none; } </style>
方式二:如果 滾動條組件用在 Layout.vue
組件中,請不要在 Layout.vue
中引入隱藏橫向滾動條的 css
樣式,這會影響后續(xù)如 下拉選擇框的滾動條樣式
解決方法:創(chuàng)建一個 css
文件,在 Layout.vue
中單獨引入css
文件,記得加上 Layout.vue
中滾動條組件的父級 class
類,避免影響后面的樣式
// common.css /* element滾動條組件 隱藏水平滾動條 */ .sidebar-wrapper .el-scrollbar__wrap { overflow-x: hidden; }
Layout.vue
<style lang="scss" scoped> @import "../assets/css/common.css"; ... </style>
到此這篇關(guān)于element滾動條組件el-scrollbar的使用詳解的文章就介紹到這了,更多相關(guān)element滾動條組件el-scrollbar內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue?基于?vuedraggable?實現(xiàn)選中、拖拽、排序效果
這篇文章主要介紹了Vue?基于?vuedraggable?實現(xiàn)選中、拖拽、排序效果,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05Vue Echarts實現(xiàn)圖表的動態(tài)適配以及如何優(yōu)化
這篇文章主要介紹了Vue Echarts實現(xiàn)圖表的動態(tài)適配以及如何優(yōu)化,在實際的前端開發(fā)過程中,動態(tài)適配是一個非常重要的問題,在數(shù)據(jù)可視化的場景下,圖表的動態(tài)適配尤為重要,需要的朋友可以參考下2023-05-05Vue?圖片監(jiān)聽鼠標(biāo)滑輪滾動實現(xiàn)圖片縮小放大功能(實現(xiàn)思路)
其實想要實現(xiàn)功能很簡單,就是在一張圖片上監(jiān)聽鼠標(biāo)滑輪滾動的事件,然后根據(jù)上滾還是下滾實現(xiàn)圖片的縮放,這篇文章主要介紹了Vue?實現(xiàn)圖片監(jiān)聽鼠標(biāo)滑輪滾動實現(xiàn)圖片縮小放大功能,需要的朋友可以參考下2023-03-03