weUI-Button

最新推荐文章于 2025-04-11 09:26:21 发布

limyuer

最新推荐文章于 2025-04-11 09:26:21 发布

阅读量8.1k

点赞数 2

分类专栏：插件文章标签：插件

本文链接：https://blog.csdn.net/qq_39285660/article/details/79082550

版权

插件专栏收录该内容

2 篇文章

订阅专栏

只需要添加相应的class类，再根据项目需求进行改变
button

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用法</title>
    <!--手机端meta-->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <!--引入css-->
    <link rel="stylesheet" href="css/weui.min.css">
    <style>
        .red{
            color:red;
        }
    </style>
</head>
<!--wap上要触发按钮的active态，必须触发ontouchstart事件，
可以在body上加上ontouchstart全局触发。-->
<body ontouchstart>
    <div>
        <p>1.按钮可以使用a或者button标签</p>
        <!--button类-->
        <p class="red">weui-btn</p>
        <a href="javascript:;" class="weui-btn">按钮</a>
        <p>2.按钮的颜色：主要操作，警告，次要操作</p>
        <p class="red">weui-btn_primary</p>
        <a href="javascript:;" class="weui-btn weui-btn_primary">按钮</a>
        <p class="red">weui-btn_warn</p>
        <a href="javascript:;" class="weui-btn weui-btn_warn">按钮</a>
        <p class="red">weui-btn_default</p>
        <a href="javascript:;" class="weui-btn weui-btn_default">按钮</a>
        <p>镂空样式按钮的颜色</p>
        <p class="red">weui-btn_plain-primary</p>
        <a href="javascript:;" class="weui-btn weui-btn_plain-primary">按钮</a>
        <p class="red">weui-btn_plain-default</p>
        <a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a>

        <p>3.页面主要操作：正常，加载，禁止</p>
        <p class="red">无</p>
        <a href="javascript:;" class="weui-btn weui-btn_primary">正常</a>
        <p class="red">weui-btn_loading</p>
        <a href="javascript:;" class="weui-btn weui-btn_primary weui-btn_loading">加载</a>
        <p class="red">weui-btn_disabled</p>
        <a href="javascript:;" class="weui-btn weui-btn_primary weui-btn_disabled">禁止</a>
        <p>镂空按钮被禁用</p>
        <p class="red">weui-btn_plain-disabled</p>
        <a href="javascript:;" class="weui-btn weui-btn_plain-default weui-btn_plain-disabled">禁用</a>

        <p>4.迷你按钮</p>
        <p class="red">weui-btn_mini</p>
        <a href="javascript:;" class="weui-btn weui-btn_primary weui-btn_mini">按钮</a>

    </div>
</body>
</html>