# Button <small>按钮</small> ## 示例 ### 风格 可选的风格 `ui` 属性值:`primary`/`strong`/`translucent`/`text`/`icon`。 [[ demo src="/demo/button/style.vue" ]] ### 尺寸 可选的尺寸 `ui` 属性值:`xs`/`s`/`m`/`l`/`xl`。 [[ demo src="/demo/button/size.vue" ]] ### 禁用状态 设置 `disabled` 来使按钮处于禁用状态。 [[ demo src="/demo/button/disabled.vue" ]] ### 加载状态 设置 `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` | 加载状态。 |