# Button <small>按钮</small> ## 示例 ### 风格 可选的风格 [`ui`](#props-ui) 属性值:`primary` / `strong` / `translucent` / `text` / `icon`。 [[ demo src="/demo/button/style.vue" ]] ### 尺寸 可选的尺寸 [`ui`](#props-ui) 属性值:`xs` / `s` / `m` / `l` / `xl`。 [[ demo src="/demo/button/size.vue" ]] ### 禁用状态 设置 [`disabled`](#props-disabled) 来使按钮处于禁用状态。 [[ demo src="/demo/button/disabled.vue" ]] ### 加载状态 设置 [`loading`](#props-loading) 来使按钮处于加载状态,无法点击。 [[ demo src="/demo/button/loading.vue" ]] ## API ### 属性 | 名称 | 类型 | 默认值 | 描述 | | -- | -- | -- | -- | | ``ui`` | `string=` | - | [^ui] | | ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 | | ``type`` | `string=` | `'button'` | [^type] | | ``loading`` | `boolean=` | `false` | 是否处于加载状态。加载状态下按钮不响应用户交互。 | ^^^ui 预设样式。为空格分隔的一组枚举值的组合。 +++枚举值 | 值 | 描述 | | -- | -- | | `normal` | 普通按钮,为默认样式。 | | `primary` | 主要按钮,背景显示为主题色。 | | `basic` | 基础按钮。 | | `strong` | 加强样式。可单独使用,也可配合 `text` / `icon` 样式使用。 | | `translucent` | 半透明样式,用于深色背景。 | | `text` | 纯文字样式,没有背景色及边框。 | | `icon` | 纯图标样式,没有背景色及边框。 | | `aux` | 辅助按钮,用于配合 `text` / `icon` 样式使用。 | | `square` | 方形按钮。可配合其它样式一同使用。 | | `xs` | 超小尺寸样式。 | | `s` | 小尺寸样式。 | | `m` | 中尺寸样式。 | | `l` | 大尺寸样式。 | | `xl` | 超大尺寸样式。 | +++ ^^^ ^^^type 按钮类型。参见原生 `<button>` 元素的 [`type`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button#attr-type)。 +++枚举值 | 值 | 描述 | | -- | -- | | `button` | 普通按钮。 | | `submit` | 提交按钮,点击会触发外部表单提交。 | | `reset` | 重置按钮,点击会触发外部表单重置为初始值。 | +++ :::warning 注意,默认值与原生 `<button>` 元素不同。需要触发表单提交时请显式设置为 `submit`。 ::: ^^^ ### 插槽 | 名称 | 描述 | | -- | -- | | ``default`` | 按钮上显示的内容。 | ### 事件 `Button` 组件支持所有原生 `<button>` 元素支持的原生事件,回调函数的参数均为相应的原生事件对象。 ### 图标 | 名称 | 描述 | | -- | -- | | ``loading`` | 加载状态。 |