Baidu DLS

返回 DLS

ButtonGroup 按钮组

示例

风格

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

<template>
<article>
  <section>
    <veui-button-group ui="primary">
      <veui-button>Undo</veui-button>
      <veui-button>Redo</veui-button>
    </veui-button-group>
  </section>
  <section>
    <veui-button-group>
      <veui-button>Undo</veui-button>
      <veui-button>Redo</veui-button>
    </veui-button-group>
  </section>
  <section>
    <veui-button-group ui="strong">
      <veui-button>Undo</veui-button>
      <veui-button>Redo</veui-button>
    </veui-button-group>
  </section>
  <section>
    <veui-button-group ui="basic">
      <veui-button>Undo</veui-button>
      <veui-button>Redo</veui-button>
    </veui-button-group>
  </section>
</article>
</template>

<script>
import { Button, ButtonGroup } from 'veui'

export default {
  components: {
    'veui-button': Button,
    'veui-button-group': ButtonGroup
  }
}
</script>

尺寸

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

<template>
<article>
  <veui-button-group ui="xl">
    <veui-button>Undo</veui-button>
    <veui-button>Redo</veui-button>
  </veui-button-group>
  <veui-button-group ui="l">
    <veui-button>Undo</veui-button>
    <veui-button>Redo</veui-button>
  </veui-button-group>
  <veui-button-group ui="m">
    <veui-button>Undo</veui-button>
    <veui-button>Redo</veui-button>
  </veui-button-group>
  <veui-button-group ui="s">
    <veui-button>Undo</veui-button>
    <veui-button>Redo</veui-button>
  </veui-button-group>
  <veui-button-group ui="xs">
    <veui-button>Undo</veui-button>
    <veui-button>Redo</veui-button>
  </veui-button-group>
</article>
</template>

<script>
import { Button, ButtonGroup } from 'veui'

export default {
  components: {
    'veui-button': Button,
    'veui-button-group': ButtonGroup
  }
}
</script>

使用 items 数据源

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

当每个数据项的 value 字段是字符串时,点击按钮将在 ButtonGroup 组件上触发 value 同名的事件。

<template>
<article>
  <veui-button-group :items="group"/>
</article>
</template>

<script>
import { ButtonGroup } from 'veui'

export default {
  components: {
    'veui-button-group': ButtonGroup
  },
  data () {
    return {
      group: [
        {
          label: 'Undo',
          value: 'undo'
        },
        {
          label: 'Redo',
          value: 'redo'
        }
      ]
    }
  }
}
</script>

禁用状态

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

ButtonGroupdisabled 属性仅在使用 items 指定内容时生效,如果使用内联的 Button 组件,则需要为每个按钮分别指定 disabled 属性。

<template>
<article>
  <section>
    <veui-checkbox v-model="disabled">
      Disabled
    </veui-checkbox>
  </section>
  <section>
    <veui-button-group
      ui="primary"
      :disabled="disabled"
    >
      <veui-button :disabled="disabled">
        Undo
      </veui-button>
      <veui-button :disabled="disabled">
        Redo
      </veui-button>
    </veui-button-group>
  </section>
  <section>
    <veui-button-group
      :items="group"
      :disabled="disabled"
    />
  </section>
  <section>
    <veui-button-group
      ui="strong"
      :items="group"
      :disabled="disabled"
    />
  </section>
</article>
</template>

<script>
import { Button, ButtonGroup, Checkbox } from 'veui'

export default {
  components: {
    'veui-button': Button,
    'veui-button-group': ButtonGroup,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      disabled: true,
      group: [
        {
          label: 'Undo',
          value: 'undo'
        },
        {
          label: 'Redo',
          value: 'redo'
        }
      ]
    }
  }
}
</script>

API

属性

名称类型默认值描述
uistring=-

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

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

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

名称类型描述
labelstring按钮文本。
value*=如传入 string 类型的值,则会在点击按钮时触发同名的事件。
disabledboolean=false按钮是否为禁用状态。

插槽

名称描述
default按钮组内容区。
item

用来定制每个按钮的内容。

默认内容:label 属性值。

名称类型描述
labelstring按钮文本。
value*=按钮项的 value 值。
indexnumber按钮在 items 中的序号。
disabledboolean=按钮是否禁用。

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

事件

名称描述
click

点击后触发,回调参数为 (item, index)

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

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