Skip to content

Radio 单选框

基本用法

v-model 为绑定值,即选中的 wd-radiovalue 值。

html
<demo-block title="基本用法">
  <wd-radio-group v-model="value">
    <wd-radio :value="1">单选框1</wd-radio>
    <wd-radio :value="2">单选框2</wd-radio>
  </wd-radio-group>
  <view>当前选中的值为:{{value}}</view>
</demo-block>
typescript
const value = ref<number>(1)

修改图标形状

修改 shape 属性,可选值为 'dot'、'button'、'check',默认为 'check'。

html
<!-- button 按钮式单选 -->
<wd-radio-group v-model="value" shape="button" @change="change">
  <wd-radio :value="1">沃特</wd-radio>
  <wd-radio :value="2">商家后台</wd-radio>
</wd-radio-group>
typescript
const value = ref<number>(1)

function change(e) {
  console.log(e)
}
注意:
内容项在3项以内,且有比较重要的信息备选(如付款类型选择等)可考虑采用圆形组件。因为会跟圆形复选框容易混淆,且会造成当前表单页页面结构不统一,一般情况不建议使用点状单选。
html
<!-- dot 点状单选 -->
<wd-radio-group v-model="value" shape="dot" @change="change">
  <wd-radio :value="1">沃特</wd-radio>
  <wd-radio :value="2">商家后台</wd-radio>
</wd-radio-group>
typescript
const value = ref<number>(1)

function change(e) {
  console.log(e)
}

表单模式

设置 cell 属性,开启表单模式单选框组。

开启表单模式时,如果同时设置 shapebutton 开启表单模式单选按钮组模式。

html
<wd-radio-group v-model="value" cell>
  <wd-radio value="1">选项一</wd-radio>
  <wd-radio value="2">选项二</wd-radio>
  <wd-radio value="3">选项三</wd-radio>
  <wd-radio value="4">选项四</wd-radio>
  <wd-radio value="5">选项五</wd-radio>
  <wd-radio value="6">选项六</wd-radio>
  <wd-radio value="7">选项七</wd-radio>
</wd-radio-group>
ts
const value = ref<number>(1)

同行展示

设置 inline 属性,使单选框在同一行展示。

html
<wd-radio-group v-model="value" inline>
  <wd-radio value="1">单选框1</wd-radio>
  <wd-radio value="2">单选框2</wd-radio>
</wd-radio-group>
ts
const value = ref<number>(1)

修改选中的颜色

设置 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>
ts
const value = ref<number>(1)

禁用

可以在 radio-group 上面设置 disabled,禁用所有单选框,也可以在单个单选框上面设置 disabled 属性,禁用某个单选框。

html
<wd-radio-group v-model="value" disabled>
  <wd-radio value="1">沃特</wd-radio>
  <wd-radio value="2">商家后台</wd-radio>
</wd-radio-group>
ts
const value = ref<number>(1)

尺寸

设置 size 属性,可选 large

html
<wd-radio-group v-model="value" size="large">
  <wd-radio value="1">沃特</wd-radio>
  <wd-radio value="2">商家后台</wd-radio>
</wd-radio-group>

Props优先级

radio设置的props优先级比radioGroup上设置的props优先级更高

html
  <wd-radio-group v-model="value" shape="button" disabled checked-color="#f00">
    <wd-radio value="1" :disabled="false" checked-color="#000">商家后台</wd-radio>
    <wd-radio value="2" :disabled="false">沃特</wd-radio>
    <wd-radio value="3">商家智能</wd-radio>
  </wd-radio-group>

RadioGroup Attributes

参数说明类型可选值默认值最低版本
v-model会自动选中value对应的单选框string / number / boolean---
shape单选框形状stringdot / button / checkcheck-
size设置大小stringlarge--
checked-color选中的颜色string-#4D80F0-
disabled禁用boolean-false-
max-width文字位置最大宽度string---
inline同行展示boolean-false-
cell表单模式boolean-false-

RadioGroup Events

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

Radio Attributes

参数说明类型可选值默认值最低版本
value单选框选中时的值。会自动匹配radioGroup的valuestring / number / boolean---
shape单选框形状stringdot / button / checkcheck-
checked-color选中的颜色string-#4D80F0-
disabled禁用boolean-false-

Released under the MIT License.

Released under the MIT License.