当前位置: 首页 > news >正文

vue3.0 + tsx 构建el-button

分析源码

在这里插入图片描述

  1. 源码使用动态计算样式来确定渲染的属性。
  2. 整体样式使用theme-chalk 中bem搭建整体样式,避免全局样式污染。
  3. 导出一堆属性来判断样式渲染

分析:主要是bem 系统的构建,属性添加并无难点。

tsx 实现el-button

在这里插入图片描述

  1. 统一管理props,并且抽离buttonProps。
  2. 通过computed 监听样式、属性的变化,重新生成样式。

分析: 这样处理更加清晰、便于维护。

处理buttonProps

在这里插入图片描述

构建 自己的bem 系统

我们知道 CSS 只有一个作用域,无论你通过什么选择器去操作样式,一旦你声明一个选择器,它就是全局的,如果项目复杂,维护人必须小心意义,因为你一不小心可能就会影响到其他元素,代码的维护性很差,而且 CSS 代码的可读性也不行。

Block, element, modifier 根据上面的思想,由 Yandex 团队提出的一种 CSS 命名方法论 BEM。
首先 BEM 是一个分层系统,它把我们的网站分为三层,这三层正好对应着 BEM 三个英文单词的简写 block, element,
modifier,分为为 块层、元素层、修饰符层。

在这里插入图片描述

button 使用示例

在这里插入图片描述

相关文章:

  • 基于JAVA的TCP网络QQ聊天工具系统
  • 【WLAN】【调试】netsh wlan常用命令使用说明
  • 教程图文详解 - 网络安全(第八章)
  • Python数据分析案例08——预测泰坦尼克号乘员的生存(机器学习全流程)
  • 计算机四级——操作系统原理常用知识点个人总结(上)
  • 【学姐面试宝典】—— 前端基础篇Ⅰ
  • c++之二叉树
  • 字符串训练赛
  • Android性能优化之【启动优化】
  • Java 集合与数据结构 · 接口 interfaces ·Collection 常用方法 · Map 常用方法
  • 面试面不过?大厂面试官是这样说的···
  • 秒懂YUV444/YUV422/YUV420计算(二十九)
  • 模方重大更新,支持3ds max、新版大疆数据、匀色、多原点数据等
  • 论文教程之 138位科研工作者分享如何(认真地)阅读一篇科学论文
  • MVC、MVP、MVVM三种模式的介绍及区别
  • 【140天】尚学堂高淇Java300集视频精华笔记(86-87)
  • axios 和 cookie 的那些事
  • CentOS6 编译安装 redis-3.2.3
  • CSS魔法堂:Absolute Positioning就这个样
  • Docker 笔记(1):介绍、镜像、容器及其基本操作
  • javascript 总结(常用工具类的封装)
  • Java方法详解
  • js中的正则表达式入门
  • NSTimer学习笔记
  • react-core-image-upload 一款轻量级图片上传裁剪插件
  • SpringBoot 实战 (三) | 配置文件详解
  • Vue2.x学习三:事件处理生命周期钩子
  • vuex 学习笔记 01
  • Work@Alibaba 阿里巴巴的企业应用构建之路
  • 阿里研究院入选中国企业智库系统影响力榜
  • 干货 | 以太坊Mist负责人教你建立无服务器应用
  • 缓存与缓冲
  • 普通函数和构造函数的区别
  • 软件开发学习的5大技巧,你知道吗?
  • # 计算机视觉入门
  • #1015 : KMP算法
  • #QT项目实战(天气预报)
  • $(document).ready(function(){}), $().ready(function(){})和$(function(){})三者区别
  • (4) PIVOT 和 UPIVOT 的使用
  • (4)Elastix图像配准:3D图像
  • (C)一些题4
  • (floyd+补集) poj 3275
  • (Note)C++中的继承方式
  • (rabbitmq的高级特性)消息可靠性
  • (zt)基于Facebook和Flash平台的应用架构解析
  • (保姆级教程)Mysql中索引、触发器、存储过程、存储函数的概念、作用,以及如何使用索引、存储过程,代码操作演示
  • (分类)KNN算法- 参数调优
  • (附源码)springboot掌上博客系统 毕业设计063131
  • (十五)使用Nexus创建Maven私服
  • (四)图像的%2线性拉伸
  • (转) 深度模型优化性能 调参
  • (转)ABI是什么
  • (转)http-server应用
  • (转)关于pipe()的详细解析
  • .MyFile@waifu.club.wis.mkp勒索病毒数据怎么处理|数据解密恢复