@tanzhenxing/zx-button v1.0.7

zx-button 按钮组件

zx-button 是一个扩展自 uni-app 官方 button 组件的增强型按钮组件，提供了更多的自定义样式和功能选项。

特性

• 完全兼容官方 button 组件的所有属性和事件
• 支持更多按钮类型：default、primary、warn、success、warning、danger、info
• 支持多种形式：普通按钮、镂空按钮、文本按钮、链接按钮
• 支持形状定制：方形、圆角、圆形
• 支持图标按钮
• 支持多种尺寸：大、中、小，以及自定义尺寸
• 支持命名插槽，更灵活的内容定制

使用方法

<template>
  <zx-button type="primary">确认</zx-button>
</template>

<script>
import ZxButton from '@/components/zx-button/zx-button.vue'

export default {
  components: {
    ZxButton
  }
}
</script>

属性说明

基础属性

样式相关属性

图标相关属性

行为属性

开放能力相关属性

插槽

事件

示例

基础用法

<zx-button>默认按钮</zx-button>
<zx-button type="primary">主要按钮</zx-button>
<zx-button type="warn">警告按钮</zx-button>
<zx-button type="success">成功按钮</zx-button>
<zx-button type="danger">危险按钮</zx-button>
<zx-button type="info">信息按钮</zx-button>

镂空按钮

<zx-button plain>镂空按钮</zx-button>
<zx-button type="primary" plain>镂空主要按钮</zx-button>

文本按钮和链接按钮

<zx-button text>文本按钮</zx-button>
<zx-button type="primary" text>主要文本按钮</zx-button>
<zx-button link>链接按钮</zx-button>
<zx-button type="primary" link>主要链接按钮</zx-button>

禁用状态

<zx-button disabled>禁用按钮</zx-button>
<zx-button type="primary" disabled>禁用主要按钮</zx-button>
<zx-button text disabled>禁用文本按钮</zx-button>
<zx-button link disabled>禁用链接按钮</zx-button>

加载状态

<zx-button loading>加载中</zx-button>
<zx-button type="primary" loading>加载中</zx-button>
<zx-button text loading>文本加载中</zx-button>

不同尺寸

<zx-button>默认尺寸</zx-button>
<zx-button size="mini">小尺寸</zx-button>
<zx-button size="large">大尺寸</zx-button>
<zx-button size="120rpx">自定义尺寸</zx-button>

不同形状

<zx-button type="primary">默认形状</zx-button>
<zx-button type="primary" round>圆角按钮</zx-button>
<zx-button type="primary" circle icon="plus"></zx-button>

带图标的按钮

<zx-button type="primary" icon="search">搜索</zx-button>
<zx-button type="success" icon="check">确认</zx-button>
<zx-button type="danger" icon="delete" circle></zx-button>

文本按钮背景

<zx-button text>普通文本按钮</zx-button>
<zx-button text bg>带背景文本按钮</zx-button>
<zx-button type="primary" text bg>带背景主要文本按钮</zx-button>

自定义颜色

<zx-button color="#8a2be2" backgroundColor="#f0f0f0">自定义颜色</zx-button>
<zx-button text color="#8a2be2">自定义文本按钮颜色</zx-button>

使用插槽

<zx-button type="primary">
  <template #icon>
    <view class="custom-icon">🔍</view>
  </template>
  自定义内容
</zx-button>

<zx-button type="primary" loading>
  <template #loading>
    <view class="custom-loading">🔄</view>
  </template>
  自定义加载图标
</zx-button>

表单提交按钮

<form @submit="submitForm">
  <!-- 表单内容 -->
  <zx-button form-type="submit" type="primary">提交</zx-button>
  <zx-button form-type="reset">重置</zx-button>
</form>

使用开放能力

<zx-button 
  open-type="getPhoneNumber" 
  @getPhoneNumber="onGetPhoneNumber"
  type="primary"
>获取手机号</zx-button>

<zx-button 
  open-type="contact" 
  type="success"
>联系客服</zx-button>