Button 按钮

按钮用于触发一个操作，是页面中最基础的操作入口

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-button 的用法，可按需组合。

<template>
  <mu-button>默认按钮</mu-button>
</template>

类型

按钮类型决定主题色，可选 default、primary、success、warning、danger、info。

<mu-button>默认按钮</mu-button>
<mu-button type="primary">主要按钮</mu-button>
<mu-button type="success">成功按钮</mu-button>
<mu-button type="warning">警告按钮</mu-button>
<mu-button type="danger">危险按钮</mu-button>
<mu-button type="info">提示按钮</mu-button>

尺寸

按钮尺寸，可选 mini、small、default、large。

<mu-button size="mini">迷你</mu-button>
<mu-button size="small">小号</mu-button>
<mu-button size="default">默认</mu-button>
<mu-button size="large">大号</mu-button>

镂空

使用镂空样式，仅保留边框与文字。

<mu-button plain type="primary">镂空按钮</mu-button>

禁用

禁用后不响应点击。

<mu-button disabled>禁用</mu-button>

图标

图标名称取自图标列表，设置后显示在文字左侧。

<mu-button icon="search">搜索</mu-button>
<mu-button plain type="primary" icon="download">下载</mu-button>
<mu-button type="primary" icon="star"></mu-button>

加载

处于加载状态时展示加载图标，并阻止点击事件。

<mu-button loading>加载中</mu-button>

圆形

使用圆形按钮，常与图标搭配。

<mu-button circle icon="plus" />

圆角

使用圆角按钮。

<mu-button round>圆角按钮</mu-button>

文本

使用文本按钮，透明背景且无边框。

<mu-button text type="primary">文字按钮</mu-button>

图标尺寸

图标尺寸透传给 mu-icon 的 size，默认取 default。

<mu-button icon="search" icon-size="mini">搜索</mu-button>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

参考

官方内置组件的通用属性与事件请参考 uni-app x Button 组件。

属性名称	说明	类型	默认值
type	按钮类型，决定主题色，可选 default、primary、success、warning、danger、info	string	default
size	按钮尺寸，可选 mini、small、default、large	string	default
plain	是否使用镂空样式，仅保留边框与文字	boolean	false
loading	是否处于加载状态，点击不触发事件	boolean	false
icon	图标名称，设置后显示在文字左侧	string	-
iconSize	图标尺寸，透传给 mu-icon 的 size	string	default
circle	是否为圆形按钮	boolean	false
round	是否为圆角按钮	boolean	false
text	是否为文字按钮，透明背景且无边框	boolean	false
disabled	是否禁用按钮，禁用后不响应点击	boolean	false
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	string	-

事件

组件支持以下事件。

事件名	说明	回调参数
click	点击按钮时触发	event: UniEvent

插槽

组件支持以下插槽。

名称	说明
default	按钮内容

注意事项

• 平台差异：App、小程序、Web 表现一致。
• 使用注意：loading 与 icon 互斥，同时设置时只显示 loading。
• 使用注意：禁用状态下绑定的 click 不会触发。
• 使用注意：plain 镂空样式仅在 type 为非默认语义色时生效。