- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- element plus的样式按需二次开发
element plus的样式按需二次开发
Admin 2023-04-01 群英技术资讯 1409 次浏览
今天小编跟大家讲解下有关“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的样式按需二次开发内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
用JS怎样制作无缝轮播图的效果，代码是什么
这篇文章主要为大家详细介绍了原生js实现无缝轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
-
Cocos项目中技能冷却效果怎样实现，过程是怎样
这篇文章主要介绍了Cocos项目中技能冷却效果怎样实现，过程是怎样相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Cocos项目中技能冷却效果怎样实现，过程是怎样文章都会有所收获，下面我们一起来看看吧。
-
JS数组的增减操作方法有哪些，有何区别
本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于JavaScript的push()、pop()、unshift()、shift() 方法的使用，下面一起来看一下，希望对大家有帮助。
-
vue怎样做多层循环表单验证？
vue怎样做多层循环表单验证？表单验证我们之前也有了解过，这篇主要给大家分享的是使用vue + el-form 实现的多层循环表单验证的内容，实现代码如下，感兴趣的朋友可以参考。
-
JavaScript中的数据类有什么，基本的用法是怎样
这篇文章主要介绍了如何理解JavaScript中的数据类型，帮助大家更好的学习JavaScript，感兴趣的朋友可以了解下
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前：400-678-4567
7x24小时售后：0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话：010-58813000
服务邮箱：service@cnnic.cn
投诉与建议：0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准（ICP备案）粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
