- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- element plus的样式按需二次开发
element plus的样式按需二次开发
Admin 2023-04-01 群英技术资讯 1681 次浏览
今天小编跟大家讲解下有关“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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
Node中cluster模块基本用法是什么，能做什么
本篇文章带大家了解一下node中的Nodejs-cluster模块，介绍一下Nodejs-cluster模块的用法，希望对大家有所帮助！
-
一文看懂JS创建对象的三种方式
很多人在学习JavaScript时，对于JavaScript创建对象的几种模式不是很理解，这篇文章对工厂模式，构造函数模式，原型模式这三种模式做除了详细介绍没希望对大家学习JS创建对象有所帮助。
-
JS实现简易点击出现子菜单功能实例
在前端开发时，点击父菜单弹出子菜单功能是比较经常遇到需求，这篇文章就主要介绍用JavaScript实现点击出现子菜单，以下是简易的实现效果以及具体代码展示，感兴趣的朋友就继续往下看吧。
-
JavaScript去掉小数点位数的方法和代码是什么
方法：1、使用“数值字符串对象.substring(0,数值字符串对象.indexOf(".")+3)”语句；2、使用“Math.round(数值对象*100)/100”语句；3、使用“数值对象.toFixed(2)”语句。
-
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
