uniapp组件-button按钮

川长思鸟来 2021-07-25 14:27 1684阅读 0赞

# 效果图 ： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

## 实现代码： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

<template>
        <view>
    		<button @click="clickBtn">type="default"</button>
    		<button style="width: 70%;color: red;background-color: orange;">自定义样式</button>
    		<button type="primary">type="primary"</button>
    		<button type="warn">type="warn"</button>
    		<button loading="true">loading="true"</button>
    		<button disabled="true">disabled="true"</button>
    		<button plain="true">plain="true"</button>
    
    		<button size="mini">按钮</button>
    		<button type="primary" size="mini">按钮</button>
    		<button type="warn" size="mini">按钮</button>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {}
            },
            methods: {
    			clickBtn(){
    				uni.showToast({
    					title:"点击了按钮"
    				})
    			}
            }
        }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/16fb44bc64a1401387f2e4ae9b9c8764.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210301195608305.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，1684人围观）

还没有评论，来说两句吧...

相关阅读

相关 Button按钮（antd-design组件库）简单使用

1.Button按钮按钮用于开始一个即时操作。 2.何时使用标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。在 Ant Desig

Love The Way You Lie/ 2023年10月14日 14:44/ 0 赞/ 10 阅读

相关清除uniapp button按钮默认样式

清除uniapp button按钮默认样式（去掉边框） button::after { border: none; } hover-

绝地灬酷狼/ 2023年07月21日 05:59/ 0 赞/ 25 阅读

相关 ExtJS 组件_button按钮配置-属性-方法详解

官方文档：[https://docs.sencha.com/extjs/7.3.0/modern/Ext.html][https_docs.sencha.com_extjs_7

红太狼/ 2022年11月08日 11:59/ 0 赞/ 540 阅读

相关 LayaAir UI 组件 # Button 按钮

目录 Button 组件详解默认Button资源自定义按钮资源按钮绑定单击事件 Button组件属性介绍 -------------------- 本文使用

电玩女神/ 2022年04月02日 09:55/ 0 赞/ 833 阅读

相关微信小程序按钮 button 组件

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] <table> <thead> <tr> <th align="left"

ゝ一世哀愁。/ 2021年09月08日 00:24/ 0 赞/ 619 阅读

相关 uniapp——button按钮组件的使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

痛定思痛。/ 2021年07月26日 00:39/ 0 赞/ 1887 阅读

相关 uniapp组件-uni-fav收藏按钮

官方示例：[https://ext.dcloud.net.cn/plugin?id=864][https_ext.dcloud.net.cn_plugin_id_864]

心已赠人/ 2021年07月25日 20:18/ 1 赞/ 742 阅读

相关 uniapp组件-uni-fab悬浮按钮

官网示例：[https://ext.dcloud.net.cn/plugin?id=144][https_ext.dcloud.net.cn_plugin_id_144]

谁借莪１个温暖的怀抱￠/ 2021年07月25日 14:28/ 1 赞/ 2445 阅读

相关 uniapp组件-button按钮

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

川长思鸟来/ 2021年07月25日 14:27/ 0 赞/ 1685 阅读

相关 uniapp 按钮组件button

属性 type='primary/default/warn' 颜色分别为蓝色/灰白色/红色 size='mini/default' 按钮大小

左手的ㄟ右手/ 2021年07月24日 18:06/ 0 赞/ 1521 阅读