Radio 单选框

示例

尺寸

可选的 ui 属性值:s / m

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

值设定

可以通过设置 value 属性来修改选中状态下 v-model 的值。

Selected: -

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

属性

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

预设样式。

描述
s小尺寸样式。
m中尺寸样式。
checkedbooleanfalse

.sync

是否处于选中状态。

value*true选中状态对应的值。
disabledboolean=false是否为禁用状态。
readonlyboolean=false是否为只读状态。

插槽

名称描述
default单选框的描述文本,点击时会进行选中。无默认内容。

事件

名称描述
change用户切换选中状态时触发,回调参数为 (checked: boolean)checked 表示当前是否选中。
input

v-model

选中状态变化后触发,回调参数为 (val: *)val 为当前 v-model 的值。与 change 事件不同,input 事件在数据操作导致状态变化时也会触发。

此外,Radio 支持如下的原生事件:

auxclickclickcontextmenudblclickmousedownmouseentermouseleavemousemovemouseovermouseoutmouseupselectwheelkeydownkeypresskeyupfocusblurfocusinfocusout

回调参数均为相应的原生事件对象。

在 GitHub 上编辑此页编辑