element plus的样式修改和扩展实例介绍_F11 - 专业站长和开发者的学习网站

分享到

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

JavaScript 来源：互联网作者：佚名发布时间：2023-10-30 22:40:32 人浏览

摘要

一、用户故事我们开发了一个业务组件库。业务组件库是需要基于公司内部的一个UI组件库。而公司的UI组件库又出基于element ui的。公司的UI组件库是对element ui的主题色进行了修改，并

一、用户故事

我们开发了一个业务组件库。业务组件库是需要基于公司内部的一个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

}

您可能感兴趣的文章 :

原文链接 :

Tag : Plus(4)Element(7)

WebComponent使用教程介绍

WebComponent 是官方定义的自定义组件实现方式，它可以让开发者不依赖任何第三方框架（如Vue，React）来实现自定义页面组件；达到组件复用
element plus的样式修改和扩展实例介绍

一、用户故事我们开发了一个业务组件库。业务组件库是需要基于公司内部的一个UI组件库。而公司的UI组件库又出基于element ui的。公司的
element弹窗表格的字体模糊bug解决方法

有一个BUG，就是在使用element弹窗表格的字体异常的模糊。如下图：这个问题其实已经存在很久了。客户屡有反馈，但是不多。我们基本自测
如何在JavaScript中使用媒体查询介绍

说起媒体查询想必大家最先想到的都是CSS中@media，没错，这是我们最常用的媒体查询方法，主要用来为我们的网站做适配处理。比如： 1
js二进制数据及其互相转化的实现

file 在js中有很多二进制数据，有file,base64,Blob,ArrayBuffer,FileReader。这些二进制数据在文件导出和下载的时候是经常会用到的，我们这篇文章就
JS实现简单的操作杆旋转示例介绍

JS 简单的操作杆旋转实现首先说明一下，请直接忽略背景图，这里主要实现的是杆旋转控制方向盘旋转。鼠标移出控制区域，控制球复位
smartbanner.js实现可定制智能应用横幅使用示例

smartbanner.js 适用于 iOS 和 Android 的可定制智能应用横幅(smart app banner)。简单易用，不依赖任何框架，怎么使用官方文档也写的很清楚，我就不
js的一些潜在规则使用介绍

为什么开发中建议使用void 0 来代替undefined 因为 JavaScript 的代码 undefined 是一个变量，而并非是一个关键字，这是JavaScript 语言公认的设计失
基于JavaScript实现图片滤镜效果介绍

随着社交媒体的普及，人们对于图片的处理需求越来越高。图片滤镜效果成为了许多人喜爱的功能之一。在本文中，我们将学习如何使用
smartbanner.js实现可定制智能应用横幅使用介绍

smartbanner.js 适用于 iOS 和 Android 的可定制智能应用横幅(smart app banner)。简单易用，不依赖任何框架，怎么使用官方文档也写的很清楚，我就不