element plus的樣式修改和擴展實例

目錄

• 一、用戶故事
• 二、需求分析
• 三、需求實現

一、用戶故事

我們開發了一個業務組件庫。業務組件庫是需要基于公司內部的一個UI組件庫。而公司的UI組件庫又出“基于”element ui的。

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

二、需求分析

實現形式的考慮

續期的擴展

三、需求實現

主題色的改變

組件樣式的擴展

element plus對于各種函數的定義

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

scss中使用了Mixins更加的風 騷，通過"@mixin 和 @content" 來實現的

"mixin" 本質是混入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的樣式修改和擴展實例的詳細內容，更多關于element plus樣式修改擴展的資料請關注其它相關文章！