2020-08-13 11:47:56 +08:00
|
|
|
# ButtonGroup <small>按钮组</small>
|
|
|
|
|
|
|
|
|
|
## 示例
|
|
|
|
|
|
|
|
|
|
### 风格
|
|
|
|
|
|
2020-09-22 11:06:13 +08:00
|
|
|
可选的 `ui` 属性值：`primary`/`strong`/`basic`。
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
[[ demo src="/demo/button-group/style.vue" ]]
|
|
|
|
|
|
|
|
|
|
### 尺寸
|
|
|
|
|
|
|
|
|
|
可选的 `ui` 属性值：`xs`/`s`/`m`/`l`/`xl`。
|
|
|
|
|
|
|
|
|
|
[[ demo src="/demo/button-group/size.vue" ]]
|
|
|
|
|
|
|
|
|
|
### 使用 `items` 数据源
|
|
|
|
|
|
|
|
|
|
可以使用 `items` 属性通过数据源指定按钮内容。
|
|
|
|
|
|
|
|
|
|
[[ demo src="/demo/button-group/items.vue" ]]
|
|
|
|
|
|
|
|
|
|
### 禁用状态
|
|
|
|
|
|
|
|
|
|
设置 `disabled` 来使按钮处于禁用状态。
|
|
|
|
|
|
|
|
|
|
[[ demo src="/demo/button-group/disabled.vue" ]]
|
|
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
|
|
|
|
### 属性
|
|
|
|
|
|
|
|
|
|
| 名称 | 类型 | 默认值 | 描述 |
|
|
|
|
|
| -- | -- | -- | -- |
|
|
|
|
|
| `ui` | `string=` | - | [^ui] |
|
|
|
|
|
| `items` | `Array<Object>` | - | [^items] |
|
|
|
|
|
| `disabled` | `boolean=` | `false` | 按钮是否为禁用状态。 |
|
|
|
|
|
|
|
|
|
|
^^^ui
|
|
|
|
|
预设样式。为空格分隔的一组枚举值的组合。
|
|
|
|
|
|
|
|
|
|
+++枚举值
|
|
|
|
|
| 值 | 描述 |
|
|
|
|
|
| -- | -- |
|
|
|
|
|
| `primary` | 主要按钮，背景显示为主题色。 |
|
|
|
|
|
| `strong` | 加强样式。 |
|
2020-09-22 11:06:13 +08:00
|
|
|
| `basic` | 基础样式。 |
|
2020-08-13 11:47:56 +08:00
|
|
|
| `xs` | 超小尺寸样式。 |
|
|
|
|
|
| `s` | 小尺寸样式。 |
|
|
|
|
|
| `m` | 中尺寸样式。 |
|
|
|
|
|
| `l` | 大尺寸样式。 |
|
|
|
|
|
| `xl` | 超大尺寸样式。 |
|
|
|
|
|
+++
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
^^^items
|
|
|
|
|
按钮数据项的数组，项目类型为 `{label, value}`。
|
|
|
|
|
|
|
|
|
|
+++字段详情
|
|
|
|
|
| 名称 | 类型 | 描述 |
|
|
|
|
|
| -- | -- | -- |
|
|
|
|
|
| `label` | `string` | 按钮文本。 |
|
|
|
|
|
| `value` | `*=` | 如传入 `string` 类型的值，则会在点击按钮时触发同名的事件。 |
|
|
|
|
|
+++
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
### 插槽
|
|
|
|
|
|
|
|
|
|
| 名称 | 描述 |
|
|
|
|
|
| -- | -- |
|
|
|
|
|
| `default` | 按钮组内容区。 |
|
|
|
|
|
| `item` | [^scoped-slot-item] |
|
|
|
|
|
|
|
|
|
|
^^^scoped-slot-item
|
|
|
|
|
默认作用域插槽，用来定制每个按钮的内容。
|
|
|
|
|
|
|
|
|
|
默认内容：`label` 属性值。
|
|
|
|
|
|
|
|
|
|
+++作用域参数
|
|
|
|
|
| 名称 | 类型 | 描述 |
|
|
|
|
|
| -- | -- | -- |
|
|
|
|
|
| `label` | `string` | 按钮文本。 |
|
|
|
|
|
| `value` | `*=` | 按钮项的 `value` 值。 |
|
|
|
|
|
| `index` | `number` | 按钮在 `items` 中的序号。 |
|
|
|
|
|
| `disabled` | `boolean=` | 按钮是否禁用。 |
|
|
|
|
|
+++
|
|
|
|
|
|
|
|
|
|
另外，`items` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
### 事件
|
|
|
|
|
|
|
|
|
|
| 名称 | 描述 |
|
|
|
|
|
| -- | -- |
|
|
|
|
|
| `click` | [^click-event] |
|
|
|
|
|
| <var><value></var> | [^value-var-event] |
|
|
|
|
|
|
|
|
|
|
^^^click-event
|
|
|
|
|
点击后触发，回调参数为 `(item, index)`。
|
|
|
|
|
|
|
|
|
|
+++参数详情
|
|
|
|
|
| 名称 | 类型 | 描述 |
|
|
|
|
|
| -- | -- | -- |
|
|
|
|
|
| `item` | `{label: string, value: *=, ...}` | 数据项。 |
|
|
|
|
|
| `index` | `number` | 按钮在 `items` 中的序号。 |
|
|
|
|
|
+++
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
^^^value-var-event
|
|
|
|
|
如果对应数据项有字符串类型的 `value` 字段，则在点击后触发名为 `value` 值的事件，参数与 `click` 事件相同。
|
|
|
|
|
^^^
|
