WEUI-button小组件实操！小白易上手--禁止摸鱼篇

前言

今天我们来学习一个非常底层的案例！！适合小白上手！

weui-Button小组件

正文

按钮组件 WEUI 源码看源码并且写出来

60%的界面工作是不需要做的,UI框架提供通用组件,
40% 业务结合代码

我们要实现这样一个Button小组件

我们拿到这样一个组件，我们首先进行分析一下，图中总共有三个按钮：主要操作和次要操作、危险操作三个按钮

我们要实现这样的按钮其实很简单！！

第一步:定义Body

我们首先在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>

简单的三个按钮组件我们就设置好了

第二步:定义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;让其无法选中，拒绝黏贴！！

这样我们组件的样式就设置完毕咯!!

.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加上属于他们自己的样式

这一步我就简单处理了一下，给他们加上了不同的背景色！

 .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;
        }

最后+效果

整体代码如下：

<!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>

效果展示:

好了，今天我们按钮小组件就学到这里啦！

如果有任何想法或者指正欢迎大家评论留言！点个赞鼓励一下吧！🌹🌹🌹