element plus的样式修改和扩展实例
短信预约 -IT技能 免费直播动态提醒
一、用户故事
我们开发了一个业务组件库。业务组件库是需要基于公司内部的一个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样式修改扩展的资料请关注编程网其它相关文章!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341