更新记录

1.0.0（2026-03-18）下载此版本

Added

初始版本发布
支持三种按钮类型：primary、secondary、danger
支持三种按钮尺寸：small、medium、large
支持禁用状态
支持点击事件
响应式设计，适配不同屏幕尺寸
支持 Vue 3 + TypeScript

Features

轻量级，无外部依赖
支持 H5、小程序、App 等所有 uni-app 支持的平台
简洁美观的按钮效果
易于集成和使用

平台兼容性

uni-app(3.7.0)

Vue2	Vue3	Vue3插件版本	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
-	√	1.0.0	√	√	√	√	√	√	√

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	小红书小程序	快应用-华为	快应用-联盟
√	√	√	√	√	√	√	√	√	√	√	√

uni-app x(3.7.0)

Chrome	Safari	Android	iOS	鸿蒙	微信小程序
-	-	-	-	-	-

其他

多语言	暗黑模式	宽屏模式
√	×	√

open-button

插件介绍

open-button 是一个功能丰富的按钮组件，用于在 uni-app 项目中创建各种样式的按钮。它支持多种类型、尺寸和状态，提供了简洁美观的按钮效果。

功能特性

✅ 支持三种按钮类型：primary、secondary、danger
✅ 支持三种按钮尺寸：small、medium、large
✅ 支持禁用状态
✅ 支持点击事件
✅ 响应式设计，适配不同屏幕尺寸
✅ 轻量级，无外部依赖
✅ 支持 Vue 3 + TypeScript

安装方法

方式一：通过 uni_modules 安装

在 HBuilderX 中，通过 插件市场 搜索 open-button 并安装。

方式二：手动安装

将 open-button 目录复制到项目的 uni_modules 目录中。

使用示例

基本用法

<template>
  <view class="container">
    <!-- 默认按钮 -->
    <open-button text="默认按钮" @tap="handleTap" />
  </view>
</template>

<script setup>
import OpenButton from '@/uni_modules/open-button/components/open-button/open-button.vue';

const handleTap = () => {
  console.log('按钮被点击');
};
</script>

不同类型按钮

<template>
  <view class="container">
    <!-- 主要按钮 -->
    <open-button text="主要按钮" type="primary" @tap="handleTap" />

    <!-- 次要按钮 -->
    <open-button text="次要按钮" type="secondary" @tap="handleTap" />

    <!-- 危险按钮 -->
    <open-button text="危险按钮" type="danger" @tap="handleTap" />
  </view>
</template>

<script setup>
import OpenButton from '@/uni_modules/open-button/components/open-button/open-button.vue';

const handleTap = () => {
  console.log('按钮被点击');
};
</script>

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

不同尺寸按钮

<template>
  <view class="container">
    <!-- 小型按钮 -->
    <open-button text="小型按钮" size="small" @tap="handleTap" />

    <!-- 中型按钮 -->
    <open-button text="中型按钮" size="medium" @tap="handleTap" />

    <!-- 大型按钮 -->
    <open-button text="大型按钮" size="large" @tap="handleTap" />
  </view>
</template>

<script setup>
import OpenButton from '@/uni_modules/open-button/components/open-button/open-button.vue';

const handleTap = () => {
  console.log('按钮被点击');
};
</script>

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

禁用状态按钮

<template>
  <view class="container">
    <!-- 禁用的按钮 -->
    <open-button text="禁用按钮" disabled @tap="handleTap" />
  </view>
</template>

<script setup>
import OpenButton from '@/uni_modules/open-button/components/open-button/open-button.vue';

const handleTap = () => {
  console.log('按钮被点击'); // 不会触发，因为按钮被禁用
};
</script>

API 文档

Props

参数	类型	默认值	说明
text	String	必填	按钮文本
type	String	'primary'	按钮类型，可选值：'primary'、'secondary'、'danger'
size	String	'medium'	按钮尺寸，可选值：'small'、'medium'、'large'
disabled	Boolean	false	是否禁用按钮

Events

事件名	说明	回调参数
tap	按钮被点击时触发	无

示例

示例 1：主要按钮

<open-button text="确定" type="primary" @tap="handleConfirm" />

示例 2：次要按钮

<open-button text="取消" type="secondary" @tap="handleCancel" />

示例 3：危险按钮

<open-button text="删除" type="danger" @tap="handleDelete" />

示例 4：小型按钮

<open-button text="提交" size="small" @tap="handleSubmit" />

示例 5：禁用按钮

<open-button text="保存" disabled @tap="handleSave" />

注意事项

text 属性是必填的，必须提供按钮文本。
当 disabled 为 true 时，按钮点击事件不会触发。
按钮类型和尺寸可以组合使用，例如：<open-button text="按钮" type="primary" size="large" />。
按钮样式使用了 uni-app 的内置变量，确保项目中已正确配置。

兼容性

支持 H5、小程序、App 等所有 uni-app 支持的平台
支持 Vue 3 + TypeScript
兼容 uni-app 2.0+ 版本

示例场景

表单提交

<template>
  <view class="form">
    <!-- 表单内容 -->
    <view class="form-actions">
      <open-button 
        text="取消" 
        type="secondary" 
        size="medium" 
        @tap="handleCancel" 
      />
      <open-button 
        text="提交" 
        type="primary" 
        size="medium" 
        @tap="handleSubmit" 
      />
    </view>
  </view>
</template>

<script setup>
import OpenButton from '@/uni_modules/open-button/components/open-button/open-button.vue';

const handleCancel = () => {
  console.log('取消');
};

const handleSubmit = () => {
  console.log('提交表单');
};
</script>

<style scoped>
.form {
  padding: 20rpx;
}

.form-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 40rpx;
}

.form-actions :deep(.base-button) {
  flex: 1;
}
</style>

操作按钮组

<template>
  <view class="action-buttons">
    <open-button 
      text="编辑" 
      type="primary" 
      size="small" 
      @tap="handleEdit" 
    />
    <open-button 
      text="分享" 
      type="secondary" 
      size="small" 
      @tap="handleShare" 
    />
    <open-button 
      text="删除" 
      type="danger" 
      size="small" 
      @tap="handleDelete" 
    />
  </view>
</template>

<script setup>
import OpenButton from '@/uni_modules/open-button/components/open-button/open-button.vue';

const handleEdit = () => {
  console.log('编辑');
};

const handleShare = () => {
  console.log('分享');
};

const handleDelete = () => {
  console.log('删除');
};
</script>

<style scoped>
.action-buttons {
  display: flex;
  gap: 10rpx;
  padding: 20rpx;
}
</style>

贡献

欢迎提交 Issue 和 Pull Request 来改进这个插件。

许可证

MIT License

open-button open-button

更新记录

1.0.0（2026-03-18） 下载此版本