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>

效果展示:

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

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

相关推荐
光影少年3 小时前
angular生态及学习路线
前端·学习·angular.js
記億揺晃着的那天5 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
无尽夏_5 小时前
HTML5(前端基础)
前端·html·html5
Jagger_5 小时前
敏捷开发流程-精简版
前端·后端
FIN66686 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing6 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女1276 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿6 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN66686 小时前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy6 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript