按钮组件

button 组件是 Uniapp 中用于创建各种交互操作按钮的核心组件。它广泛应用于表单提交、页面跳转、分享、获取用户信息等场景。通过设置不同的属性，可以控制按钮的样式、大小、禁用状态、加载状态等。它还支持微信、QQ、支付宝等平台的开放能力，实现复杂的用户交互。

1. 什么是 button 组件？

button 组件是 Uniapp 中的核心交互组件，用于触发用户操作。无论是简单的表单提交，还是复杂的开放能力调用（如分享、获取用户信息等），按钮都能通过灵活的属性配置来适应各种需求。同时，button 组件具有高度的跨平台兼容性，确保在不同平台上的一致性体验。

使用场景

• 表单提交：通过按钮触发表单的提交或重置。
• 页面跳转：点击按钮可跳转至不同页面，作为页面导航的主要方式之一。
• 分享功能：支持分享内容到社交平台，如微信、QQ 等。
• 获取用户信息：通过按钮实现获取用户授权信息，如手机号、用户资料等。
• 启动开放能力：支持调用开放平台功能，如启动应用、客服对话等。

2. button 组件的常用属性

button 组件提供了多种属性，用于控制按钮的显示效果和交互行为。以下是常用属性的详细说明：

属性名	类型	默认值	说明	平台差异说明
size	String	default	按钮的大小，支持 default（默认大小）和 mini（小尺寸）。
type	String	default	按钮的样式类型，支持 primary（主操作）、default（默认）、warn（警告）。	不同平台的颜色略有不同
plain	Boolean	false	按钮是否镂空，背景色透明。
disabled	Boolean	false	是否禁用按钮。
loading	Boolean	false	名称前是否带 loading 图标。	H5、App 等平台效果有所不同
form-type	String		用于表单操作，点击时触发 <form> 组件的 submit 或 reset 事件。
open-type	String		开放能力，用于触发开放功能，如 share、getUserInfo 等。	仅部分平台支持，如微信、QQ 小程序等
hover-class	String	button-hover	指定按钮按下时的样式类，hover-class="none" 时无点击态效果。	App-nvue 平台暂不支持
hover-start-time	Number	20	按住后多久出现点击态，单位为毫秒。
hover-stay-time	Number	70	手指松开后点击态保留时间，单位为毫秒。
app-parameter	String		打开 APP 时传递的参数，open-type="launchApp" 时有效。	微信小程序、QQ 小程序
hover-stop-propagation	Boolean	false	是否阻止本节点的祖先节点出现点击态。	微信小程序专属
lang	String	'en'	返回用户信息的语言，支持 zh_CN、zh_TW、en。	微信小程序专属
session-from	String		会话来源，open-type="contact" 时有效。	微信小程序专属
send-message-title	String	当前标题	会话内消息卡片标题，open-type="contact" 时有效。	微信小程序专属
send-message-path	String	当前路径	会话内消息卡片点击跳转的小程序路径，open-type="contact" 时有效。	微信小程序专属
send-message-img	String	截图	会话内消息卡片图片，open-type="contact" 时有效。	微信小程序专属
show-message-card	Boolean	false	是否显示会话内消息卡片，open-type="contact" 时有效。	微信小程序专属

2.1 按钮大小 size

• 说明：通过设置 size 属性控制按钮大小。支持 default 和 mini 两种值。
• 类型：String
• 默认值：default

<template>
  <view>
    <!-- 默认大小按钮 -->
    <button size="default">默认大小</button>
    
    <!-- 小尺寸按钮 -->
    <button size="mini">小尺寸</button>
  </view>
</template>

2.2 按钮类型 type

• 说明：按钮的样式类型，通过 type 属性设置。支持 primary、default 和 warn 三种类型。
• 类型：String
• 默认值：default
• 可选值：
  • primary：用于主操作，通常显示为绿色或蓝色。
  • default：默认类型，显示为白色。
  • warn：警告操作，显示为红色。

<template>
  <view>
    <!-- 主操作按钮 -->
    <button type="primary">主操作</button>
    
    <!-- 默认按钮 -->
    <button type="default">默认操作</button>
    
    <!-- 警告操作按钮 -->
    <button type="warn">警告操作</button>
  </view>
</template>

2.3 镂空按钮 plain

• 说明：通过设置 plain 属性控制按钮是否为镂空效果。启用后按钮背景色透明，仅显示边框。
• 类型：Boolean
• 默认值：false

<template>
  <view>
    <!-- 镂空按钮 -->
    <button type="primary" plain="true">镂空按钮</button>
  </view>
</template>

2.4 按钮禁用 disabled

• 说明：设置按钮的禁用状态。禁用后的按钮不可点击，通常用于操作不可用的场景。
• 类型：Boolean
• 默认值：false

<template>
  <view>
    <!-- 禁用按钮 -->
    <button type="primary" disabled="true">禁用按钮</button>
  </view>
</template>

2.5 按钮加载状态 loading

• 说明：按钮是否处于加载状态。启用 loading 后，会在按钮名称前显示加载图标。
• 类型：Boolean
• 默认值：false

<template>
  <view>
    <!-- 加载中按钮 -->
    <button type="primary" loading="true">加载中</button>
  </view>
</template>

2.6 按钮事件 open-type

• 说明：设置 open-type 属性，用于触发开放平台的功能操作。常见的 open-type 值有：
  • share：触发分享功能。
  • getUserInfo：获取用户信息。
  • launchApp：启动应用。

<template>
  <view>
    <!-- 分享按钮 -->
    <button open-type="share">分享</button>
    
    <!-- 获取用户信息按钮 -->
    <button open-type="getUserInfo" @getuserinfo="getUserInfo">获取用户信息</button>
  </view>
</template>

<script setup>
const getUserInfo = (e) => {
  console.log(e.detail.userInfo);
};
</script>

2.7 按钮点击效果 hover-class

• 说明：设置按钮按下时的样式，通过 hover-class 属性自定义按钮点击效果。
• 类型：String
• 默认值：button-hover

<template>
  <view>
    <!-- 自定义点击态按钮 -->
    <button hover-class="is-hover">点击态按钮</button>
  </view>
</template>

<style scoped>
.is-hover {
  color: rgba(255, 255, 255, 0.6);
  background-color: #179b16;
  border-color: #179b16;
}
</style>

3. 组合按钮使用案例

以下示例展示了 button 组件的不同组合，包括按钮的大小、类型、禁用状态和加载状态。通过这些组合，可以灵活应用于多种交互场景。

<template>
  <view>
    <!-- 主操作按钮 -->
    <button type="primary">主操作按钮</button>
    
    <!-- 默认操作按钮 -->
    <button type="default">默认操作按钮</button>
    
    <!-- 警告操作按钮 -->
    <button type="warn">警告操作按钮</button>
    
    <!-- 禁用按钮 -->
    <button type="primary" disabled="true">禁用按钮</button>
    
    <!-- 加载状态按钮 -->
    <button type="primary" loading="true">加载中...</button>
  </view>
</template>