VEUI

VEUI on GitHub
Play!中文

RadioGroup

Examples

Size variants

Available ui prop values: s / m.

Normal size

Checked: -

Small size

Checked: -

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

<script>
import { RadioGroup } from 'veui'

export default {
  components: {
    'veui-radio-group': RadioGroup
  },
  data () {
    return {
      flavor: null,
      flavors: [
        { value: 'LATTE', label: 'Latte' },
        { value: 'MOCHA', label: 'Mocha' },
        { value: 'AMERICANO', label: 'Americano' }
      ]
    }
  },
  computed: {
    flavorLabelMap () {
      return this.flavors.reduce((map, { value, label }) => {
        map[value] = label
        return map
      }, {})
    },
    readable () {
      return this.flavorLabelMap[this.flavor] || '-'
    }
  }
}
</script>

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

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

Additional description

Set the desc property in the data source project or specify additional description through the desc slot. The additional description will be displayed on hover.

Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <veui-radio-group
      v-model="flavor"
      :items="flavors"
    />
  </section>
  <section>
    <veui-radio-group
      v-model="flavor"
      :items="flavors"
    >
      <template #desc="{ desc, label }">
        {{ desc || `a description for ${label}` }}
      </template>
    </veui-radio-group>
  </section>
</article>
</template>

<script>
import { RadioGroup } from 'veui'

export default {
  components: {
    'veui-radio-group': RadioGroup
  },
  data () {
    return {
      flavor: null,
      flavors: [
        { value: 'LATTE', label: 'Latte', desc: 'a description for latte.' },
        { value: 'MOCHA', label: 'Mocha', desc: 'a description for mocha.' },
        { value: 'AMERICANO', label: 'Americano' }
      ]
    }
  }
}
</script>

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

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

API

Props

NameTypeDefaultDescription
uistring-

Predefined style.

ValueDescription
sSmall size style.
mMedium size style.
itemsArray<Object>[]

Radio group data source, with project type { label, value, disabled, desc, ... }.

NameTypeDescription
labelstringThe text description of the option.
value*The value corresponding to the option.
disabledbooleanWhether the option is disabled.
descstringAdditional description information for the option.
value*-

v-model

The value of the selected option in items.

disabledbooleanfalseWhether it is disabled.
readonlybooleanfalseWhether it is read-only.

Slots

NameDescription
item

Option description text area.

Default content: label property value.

NameTypeDescription
labelstringOption text.
value*Option value.
indexnumberThe index of the option in items.
disabledbooleanWhether the option is disabled.

In addition, other properties in the data item in items will also be automatically bound to the slot props through v-bind.

descAdditional description information for the button, with slot props same as the item slot.

Events

NameDescription
change

v-model

Triggered after the selection state changes, with the callback parameter (value: *). value is the value of the value property in the currently selected options of the button group.

Edit this page on GitHubEdit
© Baidu, Inc. 2024