ExUI

Appearance

Radio 单选框 ​

在一组选项中进行单选。

基础用法 ​

单选框不能单独使用，必须配合 RadioGroup 或者多个 Radio 组成一组。

选中的值：1

vue
<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <ExRadio v-model="selected" value="1">选项 1</ExRadio>
    <ExRadio v-model="selected" value="2">选项 2</ExRadio>
    <ExRadio v-model="selected" value="3">选项 3</ExRadio>
  </div>
  <p>选中的值：{{ selected }}</p>
</template>

<script setup>
import { ref } from 'vue'

const selected = ref('1')
</script>

禁用状态 ​

通过 disabled 属性禁用单选框。

vue
<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <ExRadio :model-value="false" disabled>未选中禁用</ExRadio>
    <ExRadio :model-value="true" disabled>选中禁用</ExRadio>
  </div>
</template>

尺寸 ​

提供三种尺寸：small、medium（默认）、large。

vue
<template>
  <div style="display: flex; gap: 24px; align-items: center;">
    <ExRadio v-model="selected" value="small" size="small">小尺寸</ExRadio>
    <ExRadio v-model="selected" value="medium" size="medium">中尺寸</ExRadio>
    <ExRadio v-model="selected" value="large" size="large">大尺寸</ExRadio>
  </div>
</template>

状态 ​

支持 success、warning、error 状态。

vue
<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <ExRadio v-model="selected" value="default" status="default">默认状态</ExRadio>
    <ExRadio v-model="selected" value="success" status="success">成功状态</ExRadio>
    <ExRadio v-model="selected" value="warning" status="warning">警告状态</ExRadio>
    <ExRadio v-model="selected" value="error" status="error">错误状态</ExRadio>
  </div>
</template>

RadioGroup 组件 ​

使用 ExRadioGroup 组件管理多个单选框。

选中的值：apple

vue
<template>
  <ExRadioGroup v-model="selected" label="选择你喜欢的水果">
    <ExRadio value="apple">苹果</ExRadio>
    <ExRadio value="banana">香蕉</ExRadio>
    <ExRadio value="orange">橙子</ExRadio>
    <ExRadio value="grape">葡萄</ExRadio>
  </ExRadioGroup>
</template>

<script setup>
import { ref } from 'vue'

const selected = ref('apple')
</script>

垂直布局 ​

通过 vertical 属性设置垂直布局。

vue
<template>
  <ExRadioGroup v-model="selected" vertical label="垂直布局">
    <ExRadio value="option1">选项 1</ExRadio>
    <ExRadio value="option2">选项 2</ExRadio>
    <ExRadio value="option3">选项 3</ExRadio>
  </ExRadioGroup>
</template>

禁用整组 ​

通过 RadioGroup 的 disabled 属性禁用整组单选框。

vue
<template>
  <ExRadioGroup v-model="selected" disabled label="禁用整组">
    <ExRadio value="option1">选项 1</ExRadio>
    <ExRadio value="option2">选项 2</ExRadio>
    <ExRadio value="option3">选项 3</ExRadio>
  </ExRadioGroup>
</template>

表单验证 ​

通过 rules 属性添加验证规则。

vue
<template>
  <ExRadioGroup
    v-model="selected"
    :rules="[
      (value) => !!value || '请选择一个选项',
    ]"
    required
    label="必选项"
  >
    <ExRadio value="option1">选项 1</ExRadio>
    <ExRadio value="option2">选项 2</ExRadio>
    <ExRadio value="option3">选项 3</ExRadio>
  </ExRadioGroup>
</template>

<script setup>
import { ref } from 'vue'

const selected = ref('')
</script>

API ​

ExRadio Props ​

属性说明类型默认值
modelValue / v-model绑定值string | number | boolean-
value单选框的值string | number | boolean-
name单选框名称string-
label单选框标签string-
size组件大小'small' | 'medium' | 'large''medium'
status组件状态'default' | 'success' | 'warning' | 'error''default'
disabled是否禁用booleanfalse
readonly是否只读booleanfalse
required是否必填booleanfalse
helpText帮助文本string-
errorMessage错误信息string-
rules表单验证规则Array<(value) => boolean | string>-
customClass自定义类名string-
customStyle自定义样式Record<string, string>-

ExRadio Events ​

事件名说明回调参数
update:modelValue值变化时触发(value: string | number | boolean) => void
change值变化时触发(value: string | number | boolean, event: Event) => void
focus获得焦点时触发(event: FocusEvent) => void
blur失去焦点时触发(event: FocusEvent) => void

ExRadio Slots ​

插槽名说明
default标签内容
help帮助文本插槽
error错误信息插槽

ExRadio Methods ​

方法名说明参数
focus使单选框获得焦点-
blur使单选框失去焦点-
getRadioElement获取单选框元素-

ExRadioGroup Props ​

属性说明类型默认值
modelValue / v-model绑定值string | number | boolean-
name表单域 name 属性string-
size组件大小'small' | 'medium' | 'large''medium'
status组件状态'default' | 'success' | 'warning' | 'error''default'
disabled是否禁用booleanfalse
readonly是否只读booleanfalse
vertical是否垂直排列booleanfalse
label标签文本string-
required是否必填booleanfalse
helpText帮助文本string-
errorMessage错误信息string-
rules表单验证规则Array<(value) => boolean | string>-
customClass自定义类名string-
customStyle自定义样式Record<string, string>-

ExRadioGroup Events ​

事件名说明回调参数
update:modelValue值变化时触发(value: string | number | boolean) => void
change值变化时触发(value: string | number | boolean) => void

ExRadioGroup Methods ​

方法名说明参数
getValue获取当前选中的值-
setValue设置选中的值(value: string | number | boolean) => void
getRadioGroupElement获取单选框组元素-