VEUI

VEUI on GitHub
中文

Radio

Demos

Sizes

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

Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <veui-radio
      v-model="size"
      value="m"
      :ui="size"
      name="size"
    >
      Normal size
    </veui-radio>
    <veui-radio
      v-model="size"
      value="s"
      :ui="size"
      name="size"
    >
      Small size
    </veui-radio>
  </section>
</article>
</template>

<script>
import { Radio } from 'veui'

export default {
  components: {
    'veui-radio': Radio
  },
  data () {
    return {
      size: 'm'
    }
  }
}
</script>

<style lang="less" scoped>
.veui-radio {
  margin-right: 20px;
}

section {
  margin-bottom: 20px;
}
</style>

Setting value

Use the value prop to specify the value bound to v-model.

Selected: -

Edit this demo on GitHubEdit
<template>
<article>
  <veui-radio
    v-for="({ value, label }) in flavors"
    :key="value"
    v-model="flavor"
    :value="value"
  >
    {{ label }}
  </veui-radio>
  <p>Selected: {{ flavorLabelMap[flavor] || '-' }}</p>
</article>
</template>

<script>
import { Radio } from 'veui'

export default {
  components: {
    'veui-radio': Radio
  },
  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
      }, {})
    }
  }
}
</script>

<style lang="less" scoped>
.veui-radio {
  margin-right: 20px;
}
</style>

API

Props

NameTypeDefaultDescription
uistring=-

Style variants.

ValueDescription
sSmall.
mMedium.
checkedbooleanfalse

.sync

Whether the checkbox is checked.

value*trueThe value of the radio.
disabledboolean=falseWhether the radio is disabled.
readonlyboolean=falseWhether the radio is read-only.

Slots

NameDescription
defaultThe label text of the radio. The radio is selected when the label is clicked. Displays nothing by default.

Events

NameDescription
changeTriggered when user checks the radio. The callback parameter list is (checked: boolean). checked denotes whether the radio is checked.
input

v-model

Triggered when the check state is changed. The callback parameter list is (val: *), with val being the current value of v-model. Unlike the change event, input is triggered even without user interaction.

Additionally, Radio exposes the following native events:

auxclick, click, contextmenu, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseover, mouseout, mouseup, select, wheel, keydown, keypress, keyup, focus, blur, focusin, focusout.

The callback parameter is the corresponding native event object for all events above.

Edit this page on GitHubEdit
© Baidu, Inc. 2023