Skip to content

Radio 单选框

基本使用

template
<c-radio text="radio" v-model:checked="checked" />

<c-radio-group c="row" v-model:value="value">
  <c-radio v-for="i in 3" :key="i" :text="'radio' + i" />
</c-radio-group>

颜色

template
<c-radio color="error" text="text" checked />
<c-radio color="success" text="text" checked />
<c-radio color="#7546c9" text="text" checked />
<c-radio color="#7546c9" text="text" checked active-type="icon" />

<c-radio-group :radio="{ color: 'error' }">
  <c-radio text="text" />
</c-radio-group>

选中的图标

template
<c-radio text="minus" c="minus" checked />
<c-radio text="indeterminate" c="indeterminate" checked />
<c-radio text="active icon" active-type="icon" checked />

右对齐的图标

template
<c-radio-group c="right">
  <c-radio text="text" border />
</c-radio-group>

API

Radio Props

名称类型默认值版本说明
cstringdefault配置名。使用说明
propsRadioPropsundefined全部 props 。 使用说明
c-classHTMLAttributes['class']undefined自定义类名
c-styleHTMLAttributes['style']undefined自定义样式
icon-wrap-classHTMLAttributes['class']undefined勾选框的自定义类名
icon-wrap-styleHTMLAttributes['style']undefined勾选框的自定义样式
active-type'default' | 'icon'undefined勾选框的类型, undefined
colorstringprimary字体颜色。 使用说明
sizestring | numberundefined字体大小。 使用说明
valuestring | numberundefined选中的值
checkedbooleanundefined是否选中
disabledbooleanundefined是否禁用
readonlybooleanundefined是否只读
icon-propsIconPropsundefinedIconProps
textstringundefined显示文字
text-propsTextPropsundefinedTextProps
borderbooleanundefined是否显示边框
border-bottombooleanundefined是否显示下边框
radiusstring | numberundefined圆角值。 使用说明
roundbooleanundefined是否显示为圆形
pathstringundefinedCForm value 对象的属性名,用于校验
no-feedbackbooleanundefined是否不展示校验反馈

RadioGroup Props

名称类型默认值版本说明
cstringdefault配置名。使用说明
propsRadioGroupPropsundefined全部 props 。 使用说明
c-classHTMLAttributes['class']undefined自定义类名
c-styleHTMLAttributes['style']undefined自定义样式
valueArray<string | number>undefined选中的值
disabledbooleanundefined是否禁用
directionCSSProperties['flex-direction']undefined排列。MDN Web Docs
pathstringundefinedCForm value 对象的属性名,用于校验
radioRadioPropsundefinedRadioProps
itemsRadioProps[]undefinedRadioProps

Radio Slots

名称参数说明
default()文字内容

Radio Events

名称参数说明
update:value(value: string | number) => voidvalue change 时触发

RadioGroup Events

名称参数说明
update:value(value: string | number) => voidvalue change 时触发