Element-UI 框架 el-scrollbar 元件

前言

我們在 Element-UI 的其他元件裡發現，有使用這個元件，並且還不錯，由於 Element-UI 官方文件並沒有寫到關於 el-scrollbar 的文件，所以穩定性上可能是有些問題，這裡只是爬了原始碼，翻譯了一些屬性的使用，僅供參考

快速使用

<el-scrollbar>
    <li v-for="user in userList" :key="user.id">{{user.name}}</li>
</el-scrollbar>

複製程式碼

具體例項

<el-scrollbar
    wrapClass="yf-container"
    viewClass="yf-content"
    wrapStyle="color:'#fff';fontSize:'16px';"
    viewStyle="color:'#fff';fontSize:'16px';"
    :native="false"
    :noresize="true"
    tag="ul"
>
    <li v-for="user in userList" :key="user.id">{{user.name}}</li>
</el-scrollbar>

複製程式碼

結構構成

文件

Attribute

引數	說明	型別	可選值	預設值
wrapClass	可選引數，容器的樣式名	string	-	-
viewClass	可選引數，展示檢視的樣式名	string	-	-
wrapStyle	可選引數，容器的樣式	string	-	-
viewStyle	可選引數，展示檢視的樣式	string	-	-
native	可選引數，是否使用原生滾動	boolean	-	false
noresize	可選引數，容器大小是否是不可變的	boolean	-	false
tag	可選引數，渲染容器的標籤	string	-	div

備註

原始碼 github.com/ElemeFE/ele…

文章 element ScrollBar滾動元件原始碼深入分析