element?plus的樣式修改和擴(kuò)展實例
更新時間：2023年02月24日 11:35:47 作者：砂糖橘加鹽
這篇文章主要為大家介紹了element?plus的樣式修改和擴(kuò)展實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
一、用戶故事
我們開發(fā)了一個業(yè)務(wù)組件庫。業(yè)務(wù)組件庫是需要基于公司內(nèi)部的一個UI組件庫。而公司的UI組件庫又出“基于”element ui的。
公司的UI組件庫是對element ui的主題色進(jìn)行了修改，并且也對于一些組件進(jìn)行了擴(kuò)展?？上У氖?，由于他們的版本是vu2版本。我們的業(yè)務(wù)組件庫是vue3的element plus的版本。
二、需求分析
實現(xiàn)形式的考慮
續(xù)期的擴(kuò)展
三、需求實現(xiàn)
主題色的改變
組件樣式的擴(kuò)展
element plus對于各種函數(shù)的定義
"b" 返回的是"namespace + '-' + block" 就是組件的頂級clasaName。
scss中使用了Mixins更加的風(fēng) 騷，通過"@mixin 和 @content" 來實現(xiàn)的
"mixin" 本質(zhì)是混入css的片段
const _bem = (
namespace: string,
block: string,
blockSuffix: string,
element: string,
modifier: string
) => {
let cls = `${namespace}-${block}`
if (blockSuffix) {
cls += `-${blockSuffix}`
}
if (element) {
cls += `__${element}`
}
if (modifier) {
cls += `--${modifier}`
}
return cls
}以上就是element plus的樣式修改和擴(kuò)展實例的詳細(xì)內(nèi)容，更多關(guān)于element plus樣式修改擴(kuò)展的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了JavaScript Dom對象的操作,文張以瀏覽器網(wǎng)頁就是一個Dom樹形結(jié)構(gòu)做為核心，然后根據(jù)核心進(jìn)行更新Dom節(jié)點、獲得Dom節(jié)點、刪除一個Dom節(jié)點、添加一個新的節(jié)點操作，下面文章是詳細(xì)內(nèi)容,需要的朋友可以參考以下2021-11-11
這篇文章主要介紹了微信小程序 網(wǎng)絡(luò)請求API詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
javascript中的箭頭函數(shù)基礎(chǔ)語法及使用場景示例
這篇文章主要為大家介紹了?javascript中的箭頭函數(shù)基礎(chǔ)語法及使用場景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
JavaScript實現(xiàn)一個Promise隊列小工具
這篇文章主要介紹了JavaScript實現(xiàn)一個Promise隊列小工具，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了微信小程序 扎金花簡單實例的相關(guān)資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了微信小程序 首頁制作簡單實例的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了微信小程序 自定義Toast實例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06
微信小程序組件 contact-button（客服會話按鈕）詳解及實例代碼
這篇文章主要介紹了微信小程序組件 contact-button（客服會話按鈕）詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序 canvas API詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了JavaScript前端分頁實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07