element plus的样式修改和扩展实例

更新时间：2023年02月24日 11:35:47 作者：砂糖橘加盐

这篇文章主要为大家介绍了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样式修改扩展的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

JavaScript编程中实现对象封装特性的实例讲解
JavaScript可以在一定程度上以面向对象方式进行编程,而封装是面向对象中的一个重要特性,本文就来分享阮一峰老师对JavaScript编程中实现对象封装特性的实例讲解
2016-06-06
javascript使用btoa和atob来进行Base64转码和解码
javascript原生的api本来就支持,Base64,但是由于之前的javascript局限性，导致Base64基本中看不中用。当前html5标准正式化之际，Base64将有较大的转型空间,对于Html5 Api中出现的如FileReader Api, 拖拽上传,甚至是Canvas,Video截图都可以实现
2017-03-03
插件导致ECharts被全量引入的坑示例解析
这篇文章主要为大家介绍了插件导致ECharts被全量引入的坑示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
前端常见跨域解决方案（全）
这篇文章主要介绍了前端常见跨域解决方案的相关内容，包括对跨域的解释，常见跨域场景以及跨域解决方案，内容丰富，需要的朋友可以参考下。
2017-09-09
自动检查并替换文本框内的字符
自动检查并替换文本框内的字符...
2006-06-06
17个JavaScript 单行程序
这篇文章主要介绍了17个JavaScript 单行程序，在 JavaScript 代码的世界里，在保证代码易读性的前提下更少等于更好，下面文章将为大家分享17 个 JavaScript 单行程序代码，希望能帮助到大家
2021-12-12
JavaScript立即执行函数用法解析
这篇文章主要介绍了JavaScript立即执行函数,我们知道，在一般情况下，函数必须先调用才能执行，如下所示，我们定义了一个函数，并且调用,下面一起进入文章来接具体的使用方法吧
2021-12-12
微信小程序 wx.request合法域名配置详解
这篇文章主要介绍了微信小程序 wx.request合法域名配置详解的相关资料,需要的朋友可以参考下
2016-11-11
微信小程序支付功能实现PHP实例详解
这篇文章主要介绍了微信小程序支付功能实现PHP实例详解的相关资料,需要的朋友可以参考下
2017-05-05
详解微信小程序相对定位和绝对定位
这篇文章主要介绍了详解微信小程序相对定位和绝对定位的相关资料,需要的朋友可以参考下
2017-05-05