ETU组件库

Appearance

Return to top
On this page

Radio 单选框

在一组备选项中进行单选。

基础用法

要使用 Radio 组件，只需要设置v-model绑定变量， 选中意味着变量的值为相应 Radio label属性的值， label可以是String、Number 或 Boolean

<template>
  <etu-radio label="1" size="large" v-model="radio">Option 1</etu-radio>
  <etu-radio label="2" size="large" v-model="radio">Option 2</etu-radio>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const radio = ref("1");
</script>

<template>
  <etu-radio label="1" size="large" v-model="radio">Option 1</etu-radio>
  <etu-radio label="2" size="large" v-model="radio">Option 2</etu-radio>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const radio = ref("1");
</script>

禁用状态

单选框不可用状态，需要设置设置 disabled 属性

<template>
  <etu-radio v-model="radio" disabled label="disabled">Option A</etu-radio>
  <etu-radio v-model="radio" disabled label="selected and disabled"
    >Option B</etu-radio
  >
</template>

<script lang="ts" setup>
import { ref } from "vue";

const radio = ref("selected and disabled");
</script>

<template>
  <etu-radio v-model="radio" disabled label="disabled">Option A</etu-radio>
  <etu-radio v-model="radio" disabled label="selected and disabled"
    >Option B</etu-radio
  >
</template>

<script lang="ts" setup>
import { ref } from "vue";

const radio = ref("selected and disabled");
</script>

单选框组

适用于多个勾选框相互排斥的情景。

在 radio-group 元素中定义 v-model 绑定变量，为 每一个radio 设置好 label 属性即可， 另外，还可以通过 change 事件来响应变化，它会传入一个参数 value 来表示改变之后的值。

<template>
  <etu-radio-group v-model="radio">
    <etu-radio :label="1">Option A</etu-radio>
    <etu-radio :label="2">Option B</etu-radio>
    <etu-radio :label="3">Option C</etu-radio>
  </etu-radio-group>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const radio = ref(3);
</script>

<template>
  <etu-radio-group v-model="radio">
    <etu-radio :label="1">Option A</etu-radio>
    <etu-radio :label="2">Option B</etu-radio>
    <etu-radio :label="3">Option C</etu-radio>
  </etu-radio-group>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const radio = ref(3);
</script>

Radio属性

属性名说明类型默认值
model-value / v-model选中项绑定值string / number / boolean—
label选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）string / number / boolean / object—
disabled是否禁用booleanfalse
name原生 name 属性string—

Radio事件

事件名说明类型
change当绑定值变化时触发的事件Function

Radio插槽

插槽名说明
default自定义默认内容

RadioGroup属性

属性名说明类型默认值
model-value / v-model绑定值object[]
size多选框组尺寸enum—
disabled是否禁用booleanfalse

RadioGroup事件

事件名说明类型
change当绑定值变化时触发的事件Function

RadioGroup插槽

插槽名说明子标签
default自定义默认内容Checkbox