element?plus的樣式修改和擴(kuò)展實(shí)例

更新時(shí)間：2023年02月24日 11:35:47 作者：砂糖橘加鹽

這篇文章主要為大家介紹了element?plus的樣式修改和擴(kuò)展實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一、用戶(hù)故事

我們開(kāi)發(fā)了一個(gè)業(yè)務(wù)組件庫(kù)。業(yè)務(wù)組件庫(kù)是需要基于公司內(nèi)部的一個(gè)UI組件庫(kù)。而公司的UI組件庫(kù)又出“基于”element ui的。

公司的UI組件庫(kù)是對(duì)element ui的主題色進(jìn)行了修改，并且也對(duì)于一些組件進(jìn)行了擴(kuò)展?？上У氖牵捎谒麄兊陌姹臼莢u2版本。我們的業(yè)務(wù)組件庫(kù)是vue3的element plus的版本。

二、需求分析

實(shí)現(xiàn)形式的考慮

續(xù)期的擴(kuò)展

三、需求實(shí)現(xiàn)

主題色的改變

組件樣式的擴(kuò)展

element plus對(duì)于各種函數(shù)的定義

"b" 返回的是"namespace + '-' + block" 就是組件的頂級(jí)clasaName。

scss中使用了Mixins更加的風(fēng) 騷，通過(guò)"@mixin 和 @content" 來(lái)實(shí)現(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ò)展實(shí)例的詳細(xì)內(nèi)容，更多關(guān)于element plus樣式修改擴(kuò)展的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

JavaScript Dom對(duì)象的操作
這篇文章主要介紹了JavaScript Dom對(duì)象的操作,文張以瀏覽器網(wǎng)頁(yè)就是一個(gè)Dom樹(shù)形結(jié)構(gòu)做為核心，然后根據(jù)核心進(jìn)行更新Dom節(jié)點(diǎn)、獲得Dom節(jié)點(diǎn)、刪除一個(gè)Dom節(jié)點(diǎn)、添加一個(gè)新的節(jié)點(diǎn)操作，下面文章是詳細(xì)內(nèi)容,需要的朋友可以參考以下
2021-11-11
微信小程序網(wǎng)絡(luò)請(qǐng)求API詳解
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)請(qǐng)求API詳解的相關(guān)資料,需要的朋友可以參考下
2016-10-10
javascript中的箭頭函數(shù)基礎(chǔ)語(yǔ)法及使用場(chǎng)景示例
這篇文章主要為大家介紹了?javascript中的箭頭函數(shù)基礎(chǔ)語(yǔ)法及使用場(chǎng)景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
JavaScript實(shí)現(xiàn)一個(gè)Promise隊(duì)列小工具
這篇文章主要介紹了JavaScript實(shí)現(xiàn)一個(gè)Promise隊(duì)列小工具，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-08-08
微信小程序扎金花簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序扎金花簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下
2017-02-02
微信小程序首頁(yè)制作簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序首頁(yè)制作簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下
2017-04-04
微信小程序自定義Toast實(shí)例代碼
這篇文章主要介紹了微信小程序自定義Toast實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2017-06-06
微信小程序組件 contact-button（客服會(huì)話(huà)按鈕）詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序組件 contact-button（客服會(huì)話(huà)按鈕）詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2017-01-01
微信小程序 canvas API詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序 canvas API詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2016-10-10
JavaScript前端分頁(yè)實(shí)現(xiàn)示例
這篇文章主要為大家介紹了JavaScript前端分頁(yè)實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07