VEUI

VEUI on GitHub
中文

CheckboxGroup

Demos

Size variants

Available size variant for the ui prop: s / m.

Normal size

Checked: -

Small size

Checked: -

Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <h4>Normal size</h4>
    <veui-checkbox-group
      v-model="selected"
      :items="licenses"
    />
    <p>Checked: {{ readable }}</p>
  </section>
  <section>
    <h4>Small size</h4>
    <veui-checkbox-group
      v-model="selected"
      ui="s"
      :items="licenses"
    />
    <p>Checked: {{ readable }}</p>
  </section>
</article>
</template>

<script>
import { CheckboxGroup } from 'veui'

export default {
  components: {
    'veui-checkbox-group': CheckboxGroup
  },
  data () {
    return {
      selected: null,
      licenses: [
        {
          label: 'MIT License',
          value: 'mit'
        },
        {
          label: 'BSD License',
          value: 'bsd'
        },
        {
          label: 'Apache License 2.0',
          value: 'apache2'
        }
      ]
    }
  },
  computed: {
    readable () {
      return (this.selected || []).join(', ') || '-'
    }
  }
}
</script>

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

h4 {
  margin-top: 0;
}
</style>

API

Props

NameTypeDefaultDescription
uistring=-

Style variants.

ValueDescription
sSmall.
mMedium.
itemsArray<Object>[]

The datasource of items with the item type being {label, value, disabled, exclusive ...}.

NameTypeDescription
labelstringThe descriptive label of the item.
value*The value of the item.
disabledboolean=Whether the item is disabled.
exclusiveboolean=Whether the item is exclusive.
valueArray[]

v-model

The values of the selected items.

disabledboolean=falseWhether the checkbox group is disabled.
readonlyboolean=falseWhether the checkbox group is read-only.
empty-value*-The value to be selected when all selected values are deselected. Used when exclusive items are present.

Slots

NameDescription
item

The label content of each checkbox. Displays the value of the label property by default.

NameTypeDescription
labelstringThe descriptive label of the item.
value*The value of the item.
indexnumberThe index of the item within items.
disabledboolean=Whether the item is disabled.

Additionally, custom properties apart from the listed ones will also be passes into the slot props object via v-bind.

Events

NameDescription
change

v-model

Triggers when the selected item changed. The callback parameter list is (value: Array) and value is the value array of the selected items.

Edit this page on GitHubEdit
© Baidu, Inc. 2023