Radio 单选框

介绍

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

导入

import Radio from '@/components/form/Radio.vue'
import RadioGroup from '@/components/form/RadioGroup.vue'

用法

基础用法

单选框需要配合 RadioGroup 组件一起使用，通过 v-model 绑定选中项。

<template>
  <FlexCol :padding="10" justify="flex-start">
    <RadioGroup v-model="value">
      <Radio name="0" text="单选框 1" :innerStyle="{ padding: '10rpx 0' }" />
      <Radio name="1" text="单选框 2" :innerStyle="{ padding: '10rpx 0' }" />
      <Radio name="2" text="单选框 3" :innerStyle="{ padding: '10rpx 0' }" />
      <Radio name="3" text="单选框 4" :innerStyle="{ padding: '10rpx 0' }" />
    </RadioGroup>
  </FlexCol>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Radio from '@/components/form/Radio.vue'
import RadioGroup from '@/components/form/RadioGroup.vue'
import FlexCol from '@/components/layout/FlexCol.vue'

const value = ref('0')
</script>

禁用状态

通过 disabled 属性禁用单选框。

<template>
  <FlexCol :padding="10">
    <RadioGroup v-model="value">
      <Radio name="0" disabled color="danger" text="单选框 1" :innerStyle="{ padding: '10rpx 0' }" />
      <Radio name="1" disabled color="success" text="单选框 2" :innerStyle="{ padding: '10rpx 0' }" />
    </RadioGroup>
  </FlexCol>
</template>

自定义形状

通过 shape 属性设置单选框的形状，支持 round 和 square 两种类型。

<template>
  <FlexCol :padding="10">
    <RadioGroup v-model="value">
      <Radio name="0" shape="round" text="单选框 1" :innerStyle="{ padding: '10rpx 0' }" />
      <Radio name="1" shape="square" text="单选框 2" :innerStyle="{ padding: '10rpx 0' }" />
    </RadioGroup>
  </FlexCol>
</template>

自定义颜色

通过 color 属性设置单选框的颜色。

<template>
  <FlexCol :padding="10">
    <RadioGroup v-model="value">
      <Radio name="0" color="danger" text="单选框 1" :innerStyle="{ padding: '10rpx 0' }" />
      <Radio name="1" color="success" text="单选框 2" :innerStyle="{ padding: '10rpx 0' }" />
    </RadioGroup>
  </FlexCol>
</template>

配合单元格组件使用

通过 checkPosition 属性设置单选框的位置，并使用 block 属性使其占满整行。

<template>
  <RadioGroup v-model="value">
    <Cell key="1"><Radio checkPosition="right" block name="1" text="单选框 1" /></Cell>
    <Cell key="2"><Radio checkPosition="right" block name="2" text="单选框 2" /></Cell>
    <Cell key="3"><Radio checkPosition="right" block name="3" text="单选框 3" /></Cell>
    <Cell key="4"><Radio checkPosition="right" block name="4" text="单选框 4" /></Cell>
  </RadioGroup>
</template>

API 参考

Radio

单选框组件。

Radio Props

名称	说明	类型	必填	默认值
name	单选框的值，在组中不能重复	string | number | boolean	是	-
text	单选框的文字	string	否	-
shape	单选框的形状	"square" | "round"	否	'round'
block	是否占满整个父元素	boolean	否	false
checkPosition	单选框按钮位置	"left" | "right"	否	'left'
borderColor	未选中时的边框颜色	string	否	'border.input'
checkColor	选中时勾的颜色	string	否	'white'
checkSize	单选框按钮大小	number	否	36
activeOpacity	按下时透明度	number	否	0.75
color	单选框的颜色	string	否	'primary'
disabled	是否禁用	boolean	否	false
icon	选择勾的图标	string	否	'check-mark'
textColor	文字颜色	string	否	'text.content'
disabledTextColor	禁用状态下文字颜色	string	否	'text.second'
textStyle	自定义文字样式	object	否	-
innerStyle	自定义样式	object	否	-

Radio Slots

名称	说明
default	默认插槽，用于显示文字内容
icon	自定义单选框按钮

Radio Events

名称	说明	参数
click	点击事件	$event

RadioGroup

单选框组组件。

RadioGroup Props

名称	说明	类型	必填	默认值
v-model	当前组选中的项目	string | number | boolean	否	-
disabled	是否禁用整组单选框	boolean	否	false

RadioGroup Slots

名称	说明
default	包含Radio子组件

主题变量

名称	类型	默认值	说明
RadioBoxShape	string	'round'	单选框形状
RadioBoxCheckPosition	string	'left'	单选框位置
RadioBoxBorderColor	string	'border.input'	未选中边框颜色
RadioBoxCheckColor	string	'white'	选中时勾的颜色
RadioBoxTextColor	string	'text.content'	文字颜色
RadioBoxDisabledTextColor	string	'text.second'	禁用状态文字颜色
RadioBoxColor	string	'primary'	单选框主颜色
RadioBoxCheckSize	number	36	单选框大小
RadioBoxActiveOpacity	number	0.75	按下透明度
RadioBoxMarginHorizontal	number	4	水平边距
RadioBoxTextFontSize	number	28	文字大小