前言
今天我们来学习一个非常底层的案例！！适合小白上手！
weui-Button小组件
正文
按钮组件 WEUI 源码看源码并且写出来
shell
60%的界面工作是不需要做的,UI框架提供通用组件,
40% 业务结合代码我们要实现这样一个Button小组件
我们拿到这样一个组件，我们首先进行分析一下，图中总共有三个按钮：主要操作和次要操作、危险操作三个按钮
我们要实现这样的按钮其实很简单！！
第一步:定义Body
我们首先在body定义三个按钮组件
html
<!-- css 国际命名规范BEM weui-btn Block 如果组件有状态的话 给这个加__primary -->
<!-- button 太复杂 会有一些提交表单等副作用 -->
<!-- 让a吃软饭，不跳转，把工作做足 -->
<a href="javascript:;" class="weui-btn weui-btn__primary">主要操作</a>
<a href="javascript:;" class="weui-btn weui-btn__secondary">次要操作</a>
<a href="javascript:;" class="weui-btn weui-btn__danger">危险操作</a>简单的三个按钮组件我们就设置好了
第二步:定义CSS-weui-btn
这是我们这个小模型的主要部分！！！我们来学习其中的一些样式！
我们给.weui-btn加上相对定位 position: relative再把它渲染成为一个块级元素display: block;
设置高度为184px,左右间距自适应
顶部 和底部 填充12px 左右填充24px
设置内边距和边框不应增加元素本身的宽度用box-sizing: border-box;设计盒子模型
字体大小17px,粗细500
文本居中，在利用text-decoration: none;消除a标签超链接自带的下划线~
设置颜色为#fff纯白 行高1.41176471
设置圆角为：8px
利用-webkit-tap-highlight-color: rgba(0,0,0,0);取消掉高亮
利用 user-select: none;让其无法选中，拒绝黏贴！！
这样我们组件的样式就设置完毕咯!!
css
.weui-btn{
position: relative;/*考虑全面,内部元素可以针对它相对定位*/
display: block;
width: 184px;
margin-left: auto;
margin-right: auto;
padding: 12px 24px;
box-sizing: border-box;/*盒子模型的设计*/
font-size: 17px;
font-weight: 500;
text-align: center;
text-decoration: none;
color: #fff;
line-height: 1.41176471;
border-radius: 8px;
/* css reset */
-webkit-tap-highlight-color: rgba(0,0,0,0);/*按下去的时候不能有高亮*/
user-select: none;/*考点，让无法选中,拒绝黏贴*/
/* margin: 0 auto; */
}第三步：为不同的Button加上属于他们自己的样式
这一步我就简单处理了一下，给他们加上了不同的背景色！
css
.weui-btn__primary{
margin-top: 50px;
background-color: green;
}
.weui-btn__secondary {
margin-top: 50px;
background-color: grey;
}
.weui-btn__danger{
margin-top: 50px;
background-color: red;
}最后+效果
整体代码如下：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WEUI源码</title>
<style>
body{
background-color: rgb(243, 255, 5);
}
.weui-btn{
position: relative;/*考虑全面,内部元素可以针对它相对定位*/
display: block;
width: 184px;
margin-left: auto;
margin-right: auto;
padding: 12px 24px;
box-sizing: border-box;/*盒子模型的设计*/
font-size: 17px;
font-weight: 500;
text-align: center;
text-decoration: none;
color: #fff;
line-height: 1.41176471;
border-radius: 8px;
/* css reset */
-webkit-tap-highlight-color: rgba(0,0,0,0);/*按下去的时候不能有高亮*/
user-select: none;/*考点，让无法选中,拒绝黏贴*/
/* margin: 0 auto; */
}
.weui-btn__primary{
margin-top: 50px;
background-color: green;
}
.weui-btn__secondary {
margin-top: 50px;
background-color: grey;
}
.weui-btn__danger{
margin-top: 50px;
background-color: red;
}
</style>
</head>
<body>
<!-- css 国际命名规范BEM weui-btn Block 如果组件有状态的话 给这个加__primary -->
<!-- button 太复杂 会有一些提交表单等副作用 -->
<!-- 让a吃软饭，不跳转，把工作做足 -->
<a href="javascript:;" class="weui-btn weui-btn__primary">主要操作</a>
<a href="javascript:;" class="weui-btn weui-btn__secondary">次要操作</a>
<a href="javascript:;" class="weui-btn weui-btn__danger">危险操作</a>
</body>
</html>效果展示:
好了，今天我们按钮小组件就学到这里啦！
如果有任何想法或者指正欢迎大家评论留言！点个赞鼓励一下吧！🌹🌹🌹