使用element ui模擬Mac OS滾動條

2021-10-23 12:25:06 字數 818 閱讀 7018

同樣是滾動條,mac上的就比windows上的美觀很多。但通過css修改滾動條樣式,有很多侷限,並且相容性很差。通常情況下的解決方案是將預設滾動條隱藏,再通過樣式模擬乙個滾動條,並通過js計算滾動條的長度和位置。

而如果在專案中對每個可能出現滾動條的div都模擬滾動條並計算位置,是很龐大的工程,所以出現了很多美化滾動條的元件。其實,在很多專案中引入的element-ui元件庫中就有封裝好的滾動條,只是在官網上並沒有相關文件,所以可能被大部分同學忽略了。

細心的同學可以發現,在element的select元件中,若下拉選項的內容過多,會出現滾動條,這裡的滾動條樣式就是模擬mac os系統的滾動條,如下圖。

在select元件的原始碼中,可以發現中間使用了元件。

在scrollbar的原始碼中,可以看到提供了以下幾個配置項

props: ,

wrapclass: {},

viewclass: {},

viewstyle: {},

noresize: boolean, // 如果 container 尺寸不會發生變化,最好設定它可以優化效能

tag:

}

使用方法也很簡單,只需將作為容器,將可能出現滾動條的內容包裹起來即可。以下是乙個簡單的案例:

element ui安裝使用

import elementui from element ui import element ui lib theme default index.css 若發現該處導包總是出錯,請檢查node modules中的對應版本目錄下是否有theme default index.css檔案,若沒有,解除...

element ui使用總結

在專案中用到了element ui 使用時遇到部分問題,總結如下 1.日期限制 自定義表單驗證實現 限制日期前後 以下為element ui表單元件的乙個表單項,prop是表單域 model 字段,在使用 validate resetfields 方法的情況下,該屬性是必填的,值應該是 form 元...

如何使用elementui

需要使用的時候,在這裡我們演示一下input button的用法 如何定義規則 在form上定義 rules loginformrules 在data中定義規則 loginformrules 驗證密碼 password 然後在每乙個需要規定的地方使用prop password 如何雙向繫結使用者名稱...