更新记录

1.0.1（2025-10-21） 下载此版本

添加icon

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

提交初始化版本

平台兼容性

uni-app(4.83)

hx-button

一款基于 UniApp 的自定义按钮组件，支持多种样式、尺寸和状态，适配多端使用场景。

特性

• 支持 5 种预设按钮类型（默认、主要、成功、警告、危险）
• 提供 3 种尺寸（小、中、大）
• 支持禁用状态
• 可自定义样式
• 多端兼容（H5、微信小程序、App 等）

安装说明

1. 从插件市场下载并安装插件，或手动复制到项目 uni_modules 目录
2. 无需额外注册，可直接在页面中使用（依赖 UniApp 插件自动注册机制）

使用示例

<template>
  <view class="container">
    <!-- 基础用法 -->
    <hx-button @click="handleClick">默认按钮</hx-button>

    <!-- 不同类型 -->
    <hx-button type="primary">主要按钮</hx-button>
    <hx-button type="success">成功按钮</hx-button>
    <hx-button type="warn">警告按钮</hx-button>
    <hx-button type="danger">危险按钮</hx-button>

    <!-- 不同尺寸 -->
    <hx-button size="small">小按钮</hx-button>
    <hx-button size="middle">中按钮</hx-button>
    <hx-button size="large">大按钮</hx-button>

    <!-- 禁用状态 -->
    <hx-button disabled>禁用按钮</hx-button>

    <!-- 自定义内容和样式 -->
    <hx-button
      type="primary"
      :customStyle="{ marginTop: '20rpx', width: '50%' }"
    >
      自定义宽度的按钮
    </hx-button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了')
    }
  }
}
</script>

<style>
.container {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
</style>