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样式修改扩展的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Element-Plus el-col、el-row快速布局及使用方法

    目录 前言 一.el-col span push & pull 响应式 offset 二.el-row gutter justify align 总结 前言 拖拉了一晚, 总结了一些Layout布局工具的使用方法. 一.el-col 本来打算先说row的… 写完看了一遍感觉还是换过来的好(捂脸).el-col是el-row的子元素. 在el-row添加 style="flex-direction: column;" 可以实现纵向排列el-col, 在需要纵向布局时可以使用, 横

  • Element Plus的el-tree-select组件懒加载+数据回显详解

    目录 一.背景说明 二.使用 1. dom 2.methods 三.回显 总结 一.背景说明 技术:Vue3 + Element Plus 需求:在选择组织机构时以树结构下拉展示. 用到组件:TreeSelect 树形选择组件(el-tree-select) 官网文档地址: https://element-plus.gitee.io/zh-CN/component/tree-select.html https://element-plus.gitee.io/zh-CN/component/tre

  • Element-ui/Element-plus Vue报错问题及解决

    目录 element-ui前端组件 element-plus前端组件 vue-ui安装方式 总结 这篇主要是解决在Vue3.0版本中遇到的element-ui失效报错的问题 element-ui前端组件 一套为开发者.设计师和产品经理准备的基于Vue2.0的桌面端组件库,注意,是Vue2.0 安装文档:https://element.eleme.cn/#/zh-CN/component/installation 这样,问题就来了,在Vue3.0中,element-ui会失效甚至报错 并且官方文档

  • Vue3+Element-Plus 实现点击左侧菜单时显示不同内容组件展示在Main区域功能

    目录 1.本章目标 2. 如何实现 2.1 通过将左侧菜单列表改造成路由链接的形式来实现 2.2  接下来,监听跳转的路由链接,实现点击二级菜单列表时,在Main 区域展示不同的内容组件 2.3 各组件代码 1.本章目标 1.1 点击不同的菜单列表,可以在右侧 (Main) 主体区域显示不同的组件页面 2. 如何实现 2.1 通过将左侧菜单列表改造成路由链接的形式来实现 1. 首先应该为 Menu (菜单)启用 vue-router 模式 (路由模式),默认是false Menu 菜单 | El

  • Nuxt3项目搭建过程(Nuxt3+element-plus+scss详细步骤)

    目录 1. Nuxt3的安装 1.1. 安装新建Nuxt3 项目 1.2. Nuxt3的启动使用 1.3. Nuxt3 运行端口 2. element-plus的安装配置 2.1. 演示使用 3. scss安装和全局变量配置 3.1. 使用 3.2. 外部导入使用 3.3. 全局配置使用 4. 拓展:Corepack 自动装载 pnpm 小聊: 本次记录一次使用Nuxt3搭建前端项目的过程,内容包含Nuxt3的安装,基于Vite脚手架(默认)构建的vue3项目,element-plus的安装配置

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

    目录 一.用户故事 二.需求分析 三.需求实现 一.用户故事 我们开发了一个业务组件库.业务组件库是需要基于公司内部的一个UI组件库.而公司的UI组件库又出“基于”element ui的. 公司的UI组件库是对element ui的主题色进行了修改,并且也对于一些组件进行了扩展.可惜的是,由于他们的版本是vu2版本.我们的业务组件库是vue3的element plus的版本. 二.需求分析 实现形式的考虑 续期的扩展 三.需求实现 主题色的改变 组件样式的扩展 element plus对于各种函

  • 仿dedecms下拉分页样式修改的thinkphp分页类实例

    仿dedecms下拉分页样式修改的thinkphp分页类实例

    本文实例讲述了仿dede下拉分页样式修改的thinkphp分页类.分享给大家供大家参考.具体实现方法如下: 修改thinkphp分页类:如下拉列表式分页(类似dedecms分页): 纯html代码: 复制代码 代码如下: <select name="sldd" style="width:36px" onchange="location.href=this.options[this.selectedIndex].value;"> <

  • 修改或扩展jQuery原生方法的代码实例

    修改或者扩展jQuery的方法代码实例: 毫无疑问,jQuery是一款功能强大且使用方便的类库. 从它的广泛应用可以证实上面的观点,但是正所谓人无完人,金无足赤,jQuery也是如此,并非在任何时候或者场合都能够完美的完成我们的任务,所以有事以后就需要对jQuery原有的方法进行扩展修改,但是最好方法仍然具有原来的功能. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-

  • vue中element组件样式修改无效的解决方法

    如下所示: <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了. 以上这篇vue中element组件样式修改无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue 组件间的样式冲突污染 浅谈vue中改elementUI默认样式引发的st

  • vue修改Element的el-table样式的4种方法

    修改Element中的el-table样式,可以使用以下几种方法: 1. row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style. 2. cell-style 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style. 3. header-row-style 表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style. 4. header-c

  • react装饰器与高阶组件及简单样式修改的操作详解

    使用装饰器调用 装饰器 用来装饰类的,可以增强类,在不修改类的内部的源码的同时,增强它的能力(属性或方法) 装饰器使用@函数名写法,对类进行装饰,目前在js中还是提案,使用需要配置相关兼容代码库. react脚手架创建的项目默认是不支持装饰器,需要手动安装相关模块和添加配置文件 安装相关模块 yarn add -D customize-cra react-app-rewired  @babel/plugin-proposal-decorators 修改package.json文件中scripts

  • C#获取并修改文件扩展名的方法

    本文实例讲述了C#获取并修改文件扩展名的方法.分享给大家供大家参考.具体分析如下: 这里使用C#编程的方法改变文件扩展名的文件,必须使用Path类. Path类用来解析文件系统路径的各个部分.静态方法Path.ChangeExtension方法可以用来改变文件扩展名.可用Path.GetExtension方法可用来取得的文件扩展名. 复制代码 代码如下: string filePath = @"c:\file.txt"; Console.WriteLine(filePath); Con

  • JavaScript模拟文件拖选框样式v1.0的实例

    JavaScript模拟文件拖选框样式v1.0的实例

    文件拖选v1.0 图片不清楚时请右键点击"在新链接中打开图片" 实现效果 页面布局 实现思路 拖选框 css样式中设置拖选框样式,注意设置position: absolute;漂浮状态. 监听p#container的鼠标按下事件并获取起始坐标,鼠标按下时通过append()方法添加p#selectBox. 鼠标按下事件后鼠标移动事件,比较鼠标的当前位置event.pageX,event.pageY来为p#selectBox添加坐标top/left 和尺寸width/height. 鼠标

  • 鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例

    鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例

    示例的是项目中的遇到的,要做成的效果是点击该图片按钮,达到切换图片的效果: HTML代码如下: <input class="dBox3Ulimg" type="image" src="img/newselect.png"/> <input class="dBox3Ulimg" type="image" src="img/yesselect.png" style=&quo

  • elementui的默认样式修改方法

    今天用element ui ,做了个消息提示,发现提示的位置总是在上面,如图: 可是我想让提示的位置到下面来,该怎么办? 最后还是看了官方的api 原来有个自定义样式属性 customClass 设置下就好了 js代码 css代码 效果图 以上这篇elementui的默认样式修改方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 浅谈vue中改elementUI默认样式引发的static与assets的区别 浅谈vue中改elementUI默

随机推荐