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的片段

1. const _bem = (
   
2.   namespace: string,
   
3.   block: string,
   
4.   blockSuffix: string,
   
5.   element: string,
   
6.   modifier: string
   
7. ) => {
   
8.   let cls = `${namespace}-${block}`
   
9.   if (blockSuffix) {
   
10.     cls += `-${blockSuffix}`
    
11.   }
    
12.   if (element) {
    
13.     cls += `__${element}`
    
14.   }
    
15.   if (modifier) {
    
16.     cls += `--${modifier}`
    
17.   }
    
18.   return cls
    
19. }

复制代码

以上就是element plus的样式修改和扩展实例的详细内容，更多关于element plus样式修改扩展的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/article/276365.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！