更新记录

1.0.0（2024-12-05） 下载此版本

新增

• 基础按钮组件
• 五种按钮类型：default、primary、success、warning、danger
• 四种按钮尺寸：mini、small、normal、large
• 朴素按钮样式
• 圆角按钮样式
• 禁用状态
• 加载状态
• 点击事件
• 完整示例演示
• 多端兼容支持
• Vue2/Vue3 支持

平台兼容性

wht-button 按钮组件

介绍

一个优雅的按钮组件，支持多种样式配置，适用于 H5、小程序、APP 等多端。

平台兼容性

• H5 - 支持
• 微信小程序 - 支持
• 支付宝小程序 - 支持
• APP - 支持

安装方式

在插件市场导入插件即可使用，支持 vue2/vue3。

基本用法

<template>
    <!-- 基础按钮 -->
    <wht-button>默认按钮</wht-button>
    <wht-button type="primary">主要按钮</wht-button>
    <!-- 不同类型 -->
    <wht-button type="success">成功按钮</wht-button>
    <wht-button type="warning">警告按钮</wht-button>
    <wht-button type="danger">危险按钮</wht-button>
    <!-- 朴素按钮 -->
    <wht-button plain>朴素按钮</wht-button>
    <!-- 禁用状态 -->
    <wht-button disabled>禁用按钮</wht-button>
    <!-- 加载状态 -->
    <wht-button loading>加载中</wht-button>
    <!-- 不同尺寸 -->
    <wht-button size="large">大号按钮</wht-button>
    <wht-button size="mini">小型按钮</wht-button>
</template>

API

Props

Events

常见问题

Q: 按钮文字太长显示不全怎么办？ A: 建议按钮文字保持在2-4个字，过长的文字建议使用大号按钮。