vue3.0 + tsx 构建el-button

本文介绍如何使用BEM方法论与TSX技术实现一个可复用的el-button组件,通过统一管理属性并利用computed特性来动态计算样式,确保代码的整洁性和维护性。

分析源码

在这里插入图片描述

  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 使用示例

在这里插入图片描述

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜丶陌颜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值