更新记录

1.0.4（2025-03-13） 下载此版本

更新使用文档

1.0.3（2025-03-08） 下载此版本

1.新增可加粗文字 2.按钮大小支持自定义传入其他数值

1.0.2（2025-02-25） 下载此版本

修复在 vue2 微信小程序中点击报错问题

查看更多

平台兼容性

Vue2 Vue3
√ √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue × √ × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

Button 按钮

组件名: xt-button

适配情况需自行尝试,开发时只测试了H5、APP、微信小程序

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

注意事项

如何阻止事件冒泡

vue2：在组件上直接使用@click.native.stop，如：<xt-icon @click.native.stop='click'></xt-icon>;

vue3：由于 vue3 没有native修饰符,所以不能直接在组件上使用.stop修饰符,只能嵌套一层view标签,在外层view上添加@click.stop阻止冒泡

基本用法

<template>
    <view class="xt">
        <view>基础按钮</view>
        <view class="xt-button">
            <xt-button type="primary" :customStyle="style">primary</xt-button>
            <xt-button type="success" :customStyle="style">success</xt-button>
            <xt-button type="warning" :customStyle="style">warning</xt-button>
            <xt-button type="danger" :customStyle="style">danger</xt-button>
            <xt-button type="info" :customStyle="style">info</xt-button>
        </view>
        <view>圆角按钮</view>
        <view class="xt-button">
            <xt-button type="primary" :customStyle="style" round></xt-button>
            <xt-button type="success" :customStyle="style" round></xt-button>
            <xt-button type="warning" :customStyle="style" round></xt-button>
            <xt-button type="danger" :customStyle="style" round></xt-button>
            <xt-button type="info" :customStyle="style" round></xt-button>
        </view>
        <view>镂空按钮</view>
        <view class="xt-button">
            <xt-button type="primary" :customStyle="style" plain></xt-button>
            <xt-button type="success" :customStyle="style" plain></xt-button>
            <xt-button type="warning" :customStyle="style" plain></xt-button>
            <xt-button type="danger" :customStyle="style" plain></xt-button>
            <xt-button type="info" :customStyle="style" plain></xt-button>
        </view>
        <view>文字按钮</view>
        <view class="xt-button">
            <xt-button type="primary" :customStyle="style" text></xt-button>
            <xt-button type="success" :customStyle="style" text></xt-button>
            <xt-button type="warning" :customStyle="style" text></xt-button>
            <xt-button type="danger" :customStyle="style" text></xt-button>
            <xt-button type="info" :customStyle="style" text></xt-button>
        </view>
        <view>禁用状态和加载中状态</view>
        <view class="xt-button">
            <xt-button type="primary" :customStyle="style" disabled></xt-button>
            <xt-button type="success" :customStyle="style" disabled></xt-button>
            <xt-button type="warning" :customStyle="style" loading disabled></xt-button>
            <xt-button type="danger" :customStyle="style" loading></xt-button>
            <xt-button type="info" :customStyle="style" loading></xt-button>
        </view>
        <view>自定义颜色也可以渐变色,优先级大于 type</view>
        <view class="xt-button">
            <xt-button type="primary" :customStyle="style" color="#dd7694"></xt-button>
            <xt-button type="success" :customStyle="style" color="#f3a694"></xt-button>
            <xt-button type="warning" :customStyle="style" color="linear-gradient(135deg,#17ead9,#6078ea)"></xt-button>
            <xt-button type="danger" :customStyle="style" color="linear-gradient(135deg,#f02fc2,#6094ea)"></xt-button>
            <xt-button type="info" :customStyle="style" color="linear-gradient(135deg,#5efce8,#736efe)"></xt-button>
        </view>
        <view>按钮大小</view>
        <view class="xt-button">
            <xt-button type="primary" :customStyle="style" size='large'>超大</xt-button>
            <xt-button type="success" :customStyle="style" size='default'>默认</xt-button>
            <xt-button type="warning" :customStyle="style" size='small'>小</xt-button>
            <xt-button type="danger" :customStyle="style" size='mini'>超小</xt-button>
        </view>
        <view>按钮插槽</view>
        <view class="xt-button">
            <xt-button type="primary" :customStyle="style" name="前置">
                <template #prepend>
                    <view style="margin-right: 20rpx;">
                        <xt-icon size="20"></xt-icon>
                    </view>
                </template>
            </xt-button>
            <xt-button type="success" :customStyle="style" name="后置">
                <template #append>
                    <view style="margin-left: 10rpx;">
                        <xt-icon name="xt-icon-shanchu" size="30rpx"></xt-icon>
                    </view>
                </template>
            </xt-button>
            <!-- 自定义加载中内容 -->
            <xt-button type="warning" :customStyle="style" loading>
                <template #loading>
                    <xt-icon name="xt-icon-xiaojuchang" size="30rpx"></xt-icon>
                </template>
                加载中
            </xt-button>
            <xt-button type="warning" :customStyle="style">
                <xt-icon name="xt-icon-aixin" size="30rpx"></xt-icon>
            </xt-button>
            <xt-button type="danger" :customStyle="style">
                <template #prepend>
                    <view style="margin-right: 10rpx;">
                        <xt-icon size="30rpx"></xt-icon>
                    </view>
                </template>
                <xt-icon name="xt-icon-aixin" size="30rpx"></xt-icon>
                <template #append>
                    <view style="margin-left: 10rpx;">
                        <xt-icon name="xt-icon-shanchu" size="30rpx"></xt-icon>
                    </view>
                </template>
            </xt-button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                style: {
                    padding: '0 20rpx'
                }
            }
        },
        methods: {
            onClick() {
                uni.showToast({
                    title: '点击',
                    icon: 'none'
                })
            }
        }
    }
</script>

<style lang="scss">
    .xt {
        padding: 0 20rpx;
    }

    .xt-button {
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 10rpx;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
    }

    .prep {}
</style>

API

属性名 类型 描述 默认值
name String 按钮名称 按钮
color String 按钮颜色 -
type String 按钮内置颜色，primary，success，warning，danger，info primary
disabled Boolean 是否禁用 false
loading Boolean 是否显示加载状态 false
text Boolean 是否为文字按钮 false
size String |Number 按钮尺寸,也可传入数值,large，default，small，mini default
plain Boolean 是否镂空 false
bold Boolean 是否加粗文字 false
round Boolean 圆角按钮 false
customStyle Object 自定义样式 -
throttleTime Number 节流时间，单位ms 0
hoverStopPropagation Boolean 是否阻止祖先节点出现点击态，微信小程序有效 true
hoverStartTime String | Number 0 按住后多久出现点击态，单位毫秒
hoverStayTime String | Number 200 松开后点击态保留时间，单位毫秒
formType String 用于 <form> 组件，点击触发 <form> 组件的 submit/reset 事件 -
openType String 开放能力，同uniapp官网 -
appParameter String 打开 APP 时传递的参数，open-type=launchApp时有效 -
sendMessageTitle String 会话内消息卡片标题，openType="contact"时有效 -
sendMessagePath String 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 -
sendMessageImg String 会话内消息卡片图片，openType="contact"时有效 -
showMessageCard Boolean 是否显示会话内消息卡片，用户进入客服会话时显示提示 false
dataName String 额外传参参数，用于小程序的 data-xxx 属性 -
lang String 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 en
sessionFrom String 会话来源，openType="contact"时有效 -
groupId String 打开群资料卡时传递的群号 -
guildId String 打开频道页面时传递的频道号 -
publicId String 打开公众号资料卡时传递的号码 -
dataImId String 客服的抖音号 -
dataImType String IM卡片类型 -
dataGoodsId String 商品的id，仅支持泛知识课程库和生活服务商品库中的商品 -
dataOrderId String 订单的id，仅支持交易2.0订单 -
dataBizLine String 商品类型，1代表生活服务，2代表泛知识 -
stop Boolean 是否阻止事件冒泡 false

Events

事件名 描述
click 点击事件
getphonenumber 获取用户手机号回调，open-type="getPhoneNumber"时有效
getuserinfo 获取用户信息，open-type="getUserInfo"时有效
error 发生错误时的回调
opensetting 打开授权设置页并关闭后的回调
launchapp 从小程序打开 App 成功的回调
agreeprivacyauthorization 用户同意隐私协议事件回调，open-type="agreePrivacyAuthorization"时有效
addgroupapp 添加群应用的回调
chooseaddress 调起用户编辑并选择收货地址的回调
chooseinvoicetitle 用户选择发票抬头的回调
subscribe 订阅消息授权回调
login 登录回调
im 跳转IM的成功回调
contact 客服消息回调
chooseavatar 获取用户头像回调

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...