docs_vue2/one/docs/components/button-group.md
2021-11-05 11:47:31 +08:00

2.7 KiB

ButtonGroup 按钮组

示例

风格

可选的 ui 属性值:primary / strong / basic

尺寸

可选的 ui 属性值:xs / s / m / l / xl

使用数据源

可以使用 items 属性通过数据源指定按钮内容。

禁用状态

设置 disabled 来使按钮处于禁用状态。

API

属性

名称 类型 默认值 描述
ui string= - [^ui]
items Array<Object> - [^items]
disabled boolean= false 按钮是否为禁用状态。

^^^ui 预设样式。为空格分隔的一组枚举值的组合。

+++枚举值

描述
primary 主要按钮,背景显示为主题色。
strong 加强样式。
basic 基础样式。
xs 超小尺寸样式。
s 小尺寸样式。
m 中尺寸样式。
l 大尺寸样式。
xl 超大尺寸样式。
+++
^^^

^^^items 按钮数据项的数组,项目类型为 {label, value}

+++字段详情

名称 类型 描述
label string 按钮文本。
value *= 如传入 string 类型的值,则会在点击按钮时触发同名的事件。
+++
^^^

插槽

名称 描述
default 按钮组内容区。
item [^slot-item]

^^^slot-item 用来定制每个按钮的内容。

默认内容:label 属性值。

+++作用域参数

名称 类型 描述
label string 按钮文本。
value *= 按钮项的 value 值。
index number 按钮在 items 中的序号。
disabled boolean= 按钮是否禁用。
+++

另外,items 内数据项中除了上面描述的字段之外的其它字段也会自动通过 v-bind 进行绑定到作用域参数上。 ^^^

事件

名称 描述
click [^click-event]
<value> [^value-var-event]

^^^click-event 点击后触发,回调参数为 (item, index)

+++参数详情

名称 类型 描述
item {label: string, value: *=, ...} 数据项。
index number 按钮在 items 中的序号。
+++
^^^

^^^value-var-event 如果对应数据项有字符串类型的 value 字段,则在点击后触发名为 value 值的事件,参数与 click 事件相同。 ^^^