目录
- 一、用户故事
- 二、需求分析
- 三、需求实现
一、用户故事
我们开发了一个业务组件库。业务组件库是需要基于公司内部的一个UI组件库。而公司的UI组件库又出“基于”element ui的。
公司的UI组件库是对element ui的主题色进行了修改,并且也对于一些组件进行了扩展。可惜的是,由于他们的版本是vu2版本。我们的业务组件库是vue3的element plus的版本。
二、需求分析
实现形式的考虑
续期的扩展
三、需求实现
主题色的改变
组件样式的扩展
element plus对于各种函数的定义
"b" 返回的是"namespace + '-' + block" 就是组件的顶级clasaName。
scss中使用了Mixins更加的风 骚,通过"@mixin 和 @ref="https://xwenw.com/tag/content" target="_blank">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样式修改扩展的资料请关注我们其它相关文章!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)