element?plus樣式修改和擴(kuò)展的方法是什么

這篇文章主要介紹了element plus樣式修改和擴(kuò)展的方法是什么的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇element plus樣式修改和擴(kuò)展的方法是什么文章都會(huì)有所收獲，下面我們一起來看看吧。

一、用戶故事

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

公司的UI組件庫是對element ui的主題色進(jìn)行了修改，并且也對于一些組件進(jìn)行了擴(kuò)展?？上У氖?，由于他們的版本是vu2版本。我們的業(yè)務(wù)組件庫是vue3的element plus的版本。

二、需求分析

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

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

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

主題色的改變

組件樣式的擴(kuò)展

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

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

scss中使用了Mixins更加的風(fēng) 騷，通過"@mixin 和 @content" 來實(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
}

關(guān)于“element plus樣式修改和擴(kuò)展的方法是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“element plus樣式修改和擴(kuò)展的方法是什么”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。