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

前言

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

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>

效果展示:

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

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

相关推荐
mCell6 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip6 小时前
Node.js 子进程:child_process
前端·javascript
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping12 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙13 小时前
[译] Composition in CSS
前端·css
白水清风13 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript