更新记录

1.0.0（2025-02-10） 下载此版本

发布初版

平台兼容性

Button 按钮

组件名: xt-button

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

安装方式

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

基本用法

<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

Events