VEUI

VEUI on GitHub
Play!EnglishEN
⌘ K | 全文搜索…

ButtonGroup 按钮组

示例

风格

可供选用的 ui 属性值：primary / strong / basic。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-button-group
      class="group"
      ui="primary"
    >
      <veui-button>Undo</veui-button>
      <veui-button>Redo</veui-button>
    </veui-button-group>
  </section>
  <section>
    <veui-button-group class="group">
      <veui-button>Undo</veui-button>
      <veui-button>Redo</veui-button>
    </veui-button-group>
  </section>
  <section>
    <veui-button-group
      class="group"
      ui="strong"
    >
      <veui-button>Undo</veui-button>
      <veui-button>Redo</veui-button>
    </veui-button-group>
  </section>
  <section>
    <veui-button-group
      class="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>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}

.group {
  margin-right: 1em;
}
</style>

尺寸

可供选用的 ui 属性值：xs / s / m / l / xl。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-button-group
    class="group"
    ui="xl"
  >
    <veui-button>Undo</veui-button>
    <veui-button>Redo</veui-button>
  </veui-button-group>
  <veui-button-group
    class="group"
    ui="l"
  >
    <veui-button>Undo</veui-button>
    <veui-button>Redo</veui-button>
  </veui-button-group>
  <veui-button-group
    class="group"
    ui="m"
  >
    <veui-button>Undo</veui-button>
    <veui-button>Redo</veui-button>
  </veui-button-group>
  <veui-button-group
    class="group"
    ui="s"
  >
    <veui-button>Undo</veui-button>
    <veui-button>Redo</veui-button>
  </veui-button-group>
  <veui-button-group
    class="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>

<style lang="less" scoped>
.group {
  margin-right: 1em;
}
</style>

使用数据源

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

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

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-button-group
    class="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>

<style lang="less" scoped>
.group {
  margin-right: 1em;
}
</style>

禁用状态

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

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

在 GitHub 上编辑此示例编辑
<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>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}
</style>

API

属性

名称类型默认值描述
uistring-

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

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

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

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

插槽

名称描述
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 事件相同。
在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024