Wot UI1.14.0

简体中文

English

简体中文

English

Appearance

赞助位
成为赞助商

Radio 单选框 ​

单选框用于在一组备选项中进行单选。

组件类型 ​

基本用法 ​

v-model 为绑定值，即当前选中的 wd-radio 的 value。

html
<wd-radio-group v-model="value">
  <wd-radio :value="1">单选框 1</wd-radio>
  <wd-radio type="square" :value="2">单选框 2</wd-radio>
  <wd-radio type="dot" :value="3">单选框 3</wd-radio>
</wd-radio-group>
ts
const value = ref(1)

按钮形态 ​

设置 type="button"，可切换为按钮式单选。

html
<wd-radio-group v-model="value" type="button">
  <wd-radio :value="1">选项一</wd-radio>
  <wd-radio :value="2">选项二</wd-radio>
</wd-radio-group>

组件状态 ​

禁用 ​

可以在 wd-radio-group 上设置 disabled，统一禁用整组单选框；也可以在单个 wd-radio 上单独设置。

html
<wd-radio-group v-model="value" disabled>
  <wd-radio :value="1">选项一</wd-radio>
  <wd-radio :value="2">选项二</wd-radio>
</wd-radio-group>

只读状态 ​

设置 readonly 后，单选项仍然展示当前值，但不会响应点击切换。

html
<wd-radio-group v-model="value" readonly>
  <wd-radio :value="1">选项一</wd-radio>
  <wd-radio :value="2">选项二</wd-radio>
</wd-radio-group>

允许取消选中 ​

设置 allow-uncheck 后，点击当前已选中的单选项可以取消选中。

html
<wd-radio-group v-model="value" allow-uncheck>
  <wd-radio :value="1">支持取消选中</wd-radio>
  <wd-radio :value="2">支持取消选中</wd-radio>
</wd-radio-group>

组件样式 ​

图标位置 ​

设置 placement 控制图标显示在文本左侧还是右侧。

html
<wd-radio-group v-model="value" placement="right">
  <wd-radio :value="1">单选框 1</wd-radio>
  <wd-radio :value="2">单选框 2</wd-radio>
</wd-radio-group>

修改选中的颜色 ​

设置 checked-color 修改选中状态的图标颜色。

html
<wd-radio-group v-model="value" checked-color="#fa4350">
  <wd-radio :value="1">选项一</wd-radio>
  <wd-radio :value="2">选项二</wd-radio>
</wd-radio-group>

修改未选中颜色 ​

设置 unchecked-color 修改未选中状态的图标颜色。

html
<wd-radio-group v-model="value" unchecked-color="#fa4350">
  <wd-radio :value="1">选项一</wd-radio>
  <wd-radio :value="2">选项二</wd-radio>
</wd-radio-group>

特殊样式 ​

Props 优先级 ​

单个 wd-radio 上设置的属性优先级高于 wd-radio-group。

html
<wd-radio-group v-model="value" type="button" disabled checked-color="#fa4350">
  <wd-radio :value="1" checked-color="#000" :disabled="false">选项一</wd-radio>
  <wd-radio :value="2" :disabled="false">选项二</wd-radio>
  <wd-radio :value="3">选项三</wd-radio>
</wd-radio-group>

结合 Cell 使用 ​

可以将 wd-radio 放入 wd-cell 的右侧区域，配合整行点击实现列表选择效果。

html
<wd-radio-group v-model="value">
  <wd-cell-group border insert>
    <wd-cell title="单选框 1" clickable @click="value = 1">
      <template #right-icon>
        <wd-radio :value="1" />
      </template>
    </wd-cell>
    <wd-cell title="单选框 2" clickable @click="value = 2">
      <template #right-icon>
        <wd-radio :value="2" />
      </template>
    </wd-cell>
  </wd-cell-group>
</wd-radio-group>

自定义图标 ​

通过 icon 插槽可自定义选中与未选中图标。

html
<wd-radio-group v-model="value">
  <wd-radio :value="1">
    自定义图标
    <template #icon="{ isChecked }">
      <wd-icon :name="isChecked ? 'star-fill' : 'star'" size="22px" :color="isChecked ? '#fa4350' : '#ccc'" />
    </template>
  </wd-radio>
</wd-radio-group>

布局能力 ​

同行展示 ​

设置 direction="horizontal"，可让单选框同行排列。

html
<wd-radio-group v-model="value" direction="horizontal">
  <wd-radio :value="1">单选框 1</wd-radio>
  <wd-radio :value="2">单选框 2</wd-radio>
</wd-radio-group>

RadioGroup Attributes ​

参数说明类型默认值
v-model当前选中的值，会自动匹配对应 wd-radio 的 valuestring | number | boolean-
type单选框类型，可选值为 circle、dot、square、buttonstringcircle
checked-color选中状态的图标颜色string-
unchecked-color未选中状态的图标颜色string-
disabled是否禁用整组单选框booleanfalse
readonly是否只读booleanfalse
placement图标位置，可选值为 left、rightstringleft
direction布局方向，可选值为 horizontal、verticalstringvertical
allow-uncheck是否允许取消当前已选中的值booleanfalse
custom-class根节点自定义类名string''
custom-style根节点自定义样式string''

RadioGroup Events ​

事件名称说明参数
change绑定值变化时触发{ value }

Radio Attributes ​

参数说明类型默认值
value单选项的值，会与 wd-radio-group 的 v-model 匹配string | number | boolean-
type单选框类型，可选值为 circle、dot、square、buttonstring继承自 wd-radio-group
checked-color选中状态的图标颜色string继承自 wd-radio-group
unchecked-color未选中状态的图标颜色string继承自 wd-radio-group
disabled是否禁用当前单选项boolean继承自 wd-radio-group
readonly是否只读boolean继承自 wd-radio-group
placement图标位置，可选值为 left、rightstring继承自 wd-radio-group
direction布局方向，可选值为 horizontal、verticalstring继承自 wd-radio-group
custom-label-class自定义文本节点类名string-
custom-class根节点自定义类名string''
custom-style根节点自定义样式string''

Slots ​

组件name说明参数
wd-radiodefault单选项文本内容-
wd-radioicon自定义图标内容{ isChecked }

主题定制 ​

CSS 变量 ​

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称默认值描述
--wot-radio-label-margin$spacing-tight文案与图标间距
--wot-radio-checked-color$primary-6选中颜色
--wot-radio-icon-size$n-22图标尺寸
--wot-radio-unchecked-color$coolgrey-3未选中图标颜色
--wot-radio-label-font-size$typography-body-size-main文案字号
--wot-radio-label-color$text-main文案颜色
--wot-radio-label-line-height$typography-body-line--height-size-main文案行高
--wot-radio-disabled$opacity-disabled禁用态透明度
--wot-radio-horizontal-margin$spacing-zero $spacing-extra-loose $spacing-zero $spacing-zero水平模式间距
--wot-radio-button-margin$spacing-zero $spacing-extra-loose $spacing-extra-loose $spacing-zero按钮模式项间距
--wot-radio-button-border-width$n-1按钮模式边框宽度
--wot-radio-button-shape-border-radius$radius-radius-full按钮模式标记圆角
--wot-radio-button-shape-size$n-26按钮模式标记尺寸
--wot-radio-button-font-size$typography-body-size-main按钮模式字号
--wot-radio-button-line-height$typography-body-line--height-size-main按钮模式行高
--wot-radio-button-bg$filled-bottom按钮模式背景色
--wot-radio-button-checked-bg$filled-oppo按钮模式选中背景色
--wot-radio-button-icon-size$n-10按钮模式图标尺寸
--wot-radio-button-min-width74px按钮模式最小宽度
--wot-radio-button-max-width148px按钮模式最大宽度
--wot-radio-button-border-radius$radius-main按钮模式圆角
--wot-radio-button-padding$padding-extra-tight $padding-extra-loose按钮模式内边距
--wot-radio-button-icon-color$icon-white按钮模式图标颜色
--wot-radio-button-shape-topcalc(-1 * #{$n-11})按钮模式标记顶部偏移
--wot-radio-button-shape-leftcalc(-1 * #{$n-9})按钮模式标记左侧偏移
--wot-radio-button-shape-rightcalc(-1 * #{$n-9})按钮模式标记右侧偏移
--wot-radio-button-icon-topcalc(13 * #{$n-1})按钮模式图标顶部偏移
--wot-radio-button-icon-right$n-4按钮模式图标右侧偏移
--wot-radio-button-icon-left$n-4按钮模式图标左侧偏移

源代码 ​

文档
 • 组件

Released under the MIT License.

Copyright © 2023-present weisheng

Released under the MIT License.

Copyright © 2023-present weisheng