Button 按钮

响应式、高质感按钮组件，支持黑白熊猫风与 OLED 暗黑模式自动响应，包含类型、尺寸、形状、加载状态与弥散发光等全量配置。

代码示例

1. 基础按钮类型 (Type)

使用 type 属性控制按钮的主要语义形态，包含 primary、success、warning、error、info、default。

<template>
  <mu-button type="primary">主要按钮 Primary</mu-button>
  <mu-button type="success">成功按钮 Success</mu-button>
  <mu-button type="warning">警告按钮 Warning</mu-button>
  <mu-button type="error">危险按钮 Error</mu-button>
  <mu-button type="info">信息按钮 Info</mu-button>
  <mu-button type="default">默认按钮 Default</mu-button>
</template>

---

2. 风格与样式 (Style)

支持 plain 朴素边框模式、text 纯文本模式与 glow 弥散发光外晕模式。

<template>
  <mu-button type="primary" plain>朴素主要 Plain</mu-button>
  <mu-button type="success" plain>朴素成功 Plain</mu-button>
  <mu-button type="primary" text>纯文本 Text</mu-button>
  <mu-button type="error" text>危险文本 Text</mu-button>
  <mu-button type="primary" glow>弥散发光 Glow</mu-button>
</template>

---

3. 尺寸规格 (Size)

支持 large (48px)、normal (40px)、small (32px)、mini (24px) 四种尺寸规范。

<template>
  <mu-button size="large" type="primary">Large 48px</mu-button>
  <mu-button size="normal" type="primary">Normal 40px</mu-button>
  <mu-button size="small" type="primary">Small 32px</mu-button>
  <mu-button size="mini" type="primary">Mini 24px</mu-button>
</template>

---

4. 形状形态 (Shape)

支持 radius (微圆角)、round (全圆胶囊) 与 square (直角)。

<template>
  <mu-button shape="radius" type="primary">微圆角 Radius</mu-button>
  <mu-button shape="round" type="primary">胶囊按钮 Round</mu-button>
  <mu-button shape="square" type="primary">直角按钮 Square</mu-button>
</template>

---

5. 状态与加载 (Status)

设置 loading 属性显示加载旋转圈，设置 disabled 禁用触发。

<template>
  <mu-button loading type="primary">加载中 Loading</mu-button>
  <mu-button loading loading-text="保存中..." type="success">带文案加载</mu-button>
  <mu-button disabled type="primary">禁用主要 Disabled</mu-button>
</template>

---

6. 通栏与矢量图标 (Block & Icon)

设置 block 属性为独占一行宽度的通栏块级按钮，设置 icon 属性展示前置图标。

<template>
  <mu-button block type="primary" icon="send">通栏发送按钮 Block Icon</mu-button>
  <mu-button block plain type="primary" icon="download">下载配置文件 Download</mu-button>
</template>

---

7. 自定义渐变按钮 (Gradient)

设置 type="gradient" 使用经典炫彩渐变，或通过 gradient 属性传入双色数组 (如 ['#FF416C', '#FF4B2B']) 来自定义渐变。

<template>
  <mu-button type="gradient">默认渐变 Gradient</mu-button>
  <mu-button :gradient="['#FF416C', '#FF4B2B']">日落炫彩渐变</mu-button>
  <mu-button :gradient="['#8A2387', '#E94057']">魅紫浪漫渐变</mu-button>
</template>

---

8. 小程序开放能力 (OpenType)

通过 open-type 属性即可无缝调起微信/QQ/支付宝小程序的原生开放能力，包括获取用户信息、手机号授权、隐私授权、客服会话、消息分享、打开授权设置等。

<template>
  <!-- 获取用户信息 -->
  <mu-button type="primary" icon="user" open-type="getUserInfo" @getuserinfo="onGetUserInfo">
    获取用户信息
  </mu-button>

  <!-- 获取手机号 -->
  <mu-button type="success" icon="phone" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
    手机号快捷登录
  </mu-button>

  <!-- 打开客服会话 -->
  <mu-button type="warning" icon="message" open-type="contact" @contact="onContact">
    联系在线客服
  </mu-button>

  <!-- 原生分享 -->
  <mu-button type="info" icon="share" open-type="share">
    分享给好友
  </mu-button>

  <!-- 打开授权设置 -->
  <mu-button type="default" icon="setting" open-type="openSetting">
    权限管理
  </mu-button>
</template>

<script setup>
const onGetUserInfo = (e) => {
  console.log('用户信息:', e.detail)
}
const onGetPhoneNumber = (e) => {
  console.log('手机号凭证:', e.detail)
}
const onContact = (e) => {
  console.log('进入客服会话')
}
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
type	按钮类型	String	primary / success / warning / error / gradient / info / default	'primary'
gradient	自定义渐变配色（双色数组或 CSS 渐变字符串）	String / Array	-	''
size	尺寸大小	String	large / medium / small / mini	'medium'
shape	形状样式	String	radius / round / square	'radius'
plain	是否为朴素边框模式	Boolean	true / false	false
text	是否为纯文字模式	Boolean	true / false	false
ghost	是否为幽灵透明背景模式（白色边框+文字）	Boolean	true / false	false
dashed	是否为虚线边框模式	Boolean	true / false	false
glow	是否开启弥散发光外晕	Boolean	true / false	true
block	是否为块级独占一行	Boolean	true / false	false
bold	是否加粗按钮文字	Boolean	true / false	true
loading	是否显示加载状态	Boolean	true / false	false
loadingText	加载状态文案	String	-	''
disabled	是否禁用	Boolean	true / false	false
icon	矢量图标名称	String	-	''
iconColor	图标颜色（默认跟随文字色）	String	-	''
iconSize	图标尺寸	Number / String	-	0（自适应）
iconPosition	图标位置	String	left / right	'left'
showArrow	是否在按钮右侧显示内嵌箭头	Boolean	true / false	false
width	自定义按钮宽度（支持 rpx/px/% 等单位）	String	-	''
height	自定义按钮高度（支持 rpx/px 等单位）	String	-	''
margin	外边距（CSS margin 语法）	String	-	''
padding	内边距（CSS padding 语法）	String	-	''
background	自定义背景颜色	String	-	''
color	自定义文字颜色	String	-	''
formType	原生 button 的 form-type 属性	String	submit / reset	''
openType	小程序开放能力类型	String	getUserInfo / getPhoneNumber / getRealtimePhoneNumber / agreePrivacyAuthorization / contact / share / launchApp / openSetting / feedback / chooseAvatar	''
lang	返回用户信息的语言	String	zh_CN / zh_TW / en	'zh_CN'
sessionFrom	客服会话来源标识	String	-	''
sendMessageTitle	客服消息卡片标题	String	-	''
sendMessagePath	客服消息卡片路径	String	-	''
sendMessageImg	客服消息卡片图片	String	-	''
showMessageCard	是否在客服会话中展示卡片	Boolean	true / false	false
appParameter	打开 APP 时传递的参数	String	-	''

---

事件说明 (Events)

事件名	说明	回调参数
click	点击按钮时触发（非 disabled 和非 loading 状态下）	(event: Event)
getuserinfo	用户点击同意获取用户信息回调	(event: Event)
getphonenumber	获取手机号回调	(event: Event)
getrealtimephonenumber	实时手机号验证回调	(event: Event)
agreeprivacyauthorization	用户同意隐私协议回调	(event: Event)
contact	客服会话回调	(event: Event)
error	开放能力触发失败回调	(event: Event)
opensetting	打开设置界面完成回调	(event: Event)
launchapp	打开 APP 回调	(event: Event)
chooseavatar	获取用户头像回调	(event: Event)