TnRadio-单选框

单选框一般用于在多个备选项中进行单选，如性别选择等。

单选框TnRadio一般配合TnRadioGroup使用，TnRadioGroup设置的参数会传递给TnRadio。

组件位置

nodeuni_modules

typescript

import TnRadio from '@tuniao/tnui-vue3-uniapp/components/radio/src/radio.vue'
import TnRadioGroup from '@tuniao/tnui-vue3-uniapp/components/radio/src/radio-group.vue'

import TnRadio from '@tuniao/tnui-vue3-uniapp/components/radio/src/radio.vue'
import TnRadioGroup from '@tuniao/tnui-vue3-uniapp/components/radio/src/radio-group.vue'

typescript

import TnRadio from '@/uni_modules/tuniaoui-vue3/components/radio/src/radio.vue'
import TnRadioGroup from '@/uni_modules/tuniaoui-vue3/components/radio/src/radio-group.vue'

import TnRadio from '@/uni_modules/tuniaoui-vue3/components/radio/src/radio.vue'
import TnRadioGroup from '@/uni_modules/tuniaoui-vue3/components/radio/src/radio-group.vue'

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基本使用

通过v-model设置选中的值
通过label设置选项(选中)的值，在配合TnRadioGroup时，会通过传递给TnRadioGroup的v-model进行比较，相同则选中
通过disabled设置是否禁用
通过size设置单选框的尺寸，可选值为sm、lg
通过active-color设置选中时的颜色
通过border设置是否显示边框
通过disabled设置单选框禁止选择，如果设置了TnRadioGroup的disabled，则会覆盖TnRadio的disabled

单`TnRadio`使用

vue

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref('')
</script>

<template>
  <TnRadio v-model="selectValue" label="男">男</TnRadio>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref('')
</script>

<template>
  <TnRadio v-model="selectValue" label="男">男</TnRadio>
</template>

vue

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref('')
</script>

<template>
  <TnRadio v-model="selectValue" label="未知" disabled>未知</TnRadio>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref('')
</script>

<template>
  <TnRadio v-model="selectValue" label="未知" disabled>未知</TnRadio>
</template>

`TnRadio`配合`TnRadioGroup`使用

vue

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref('')
</script>

<template>
  <TnRadioGroup v-model="selectValue">
    <TnRadio label="男">男</TnRadio>
    <TnRadio label="女">女</TnRadio>
  </TnRadioGroup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref('')
</script>

<template>
  <TnRadioGroup v-model="selectValue">
    <TnRadio label="男">男</TnRadio>
    <TnRadio label="女">女</TnRadio>
  </TnRadioGroup>
</template>

vue

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref('')
</script>

<template>
  <TnRadioGroup v-model="selectValue" border>
    <TnRadio label="男">男</TnRadio>
    <TnRadio label="女">女</TnRadio>
  </TnRadioGroup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref('')
</script>

<template>
  <TnRadioGroup v-model="selectValue" border>
    <TnRadio label="男">男</TnRadio>
    <TnRadio label="女">女</TnRadio>
  </TnRadioGroup>
</template>

禁止点击标签进行选择

设置label-disabled为true，则点击标签不会触发选中

vue

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref('')
</script>

<template>
  <TnRadioGroup v-model="selectValue" label-disabled>
    <TnRadio label="男">男</TnRadio>
    <TnRadio label="女">女</TnRadio>
  </TnRadioGroup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref('')
</script>

<template>
  <TnRadioGroup v-model="selectValue" label-disabled>
    <TnRadio label="男">男</TnRadio>
    <TnRadio label="女">女</TnRadio>
  </TnRadioGroup>
</template>

通过`slot`自定义内容

设置slot名为left的插槽可以将单选框放置在内容的右侧

默认的slot是将内容放在单选框的左侧

vue

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref('')
</script>

<template>
  <TnRadioGroup v-model="selectValue">
    <TnRadio label="男">
      <template #left>男</template>
    </TnRadio>
    <TnRadio label="女">女</TnRadio>
  </TnRadioGroup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const selectValue = ref('')
</script>

<template>
  <TnRadioGroup v-model="selectValue">
    <TnRadio label="男">
      <template #left>男</template>
    </TnRadio>
    <TnRadio label="女">女</TnRadio>
  </TnRadioGroup>
</template>

API

Radio Props

属性名	说明	类型	默认值	可选值
model-value/v-model	radio 单选框绑定的值	String \| Number ｜ Boolean	-	-
label	radio 单选框的值，在使用单选组时，radio 的值就是 label	String \|Number ｜ Boolean	-	-
size	单选框尺寸	String	-	`sm` / `lg`
disabled	radio 单选框是否禁用	Boolean	`false`	`true`
label-disabled	radio 禁止点击标签进行选择	Boolean	`false`	`true`
border	是否显示边框	Boolean	`false`	`true`
active-color	radio 激活时的颜色，以 tn 开头则使用图鸟内置的颜色只支持普通颜色	String	-	颜色
custom-style	在外部自定义组件样式	CSSProperties	{}	-
custom-class	在外部作用于组件的类	String	-	-

Radio Events

| 事件名 | 说明 | 类型 | | ------ | ---------------- | --------------- | ------ | ----------------- | | change | 选中的值发生改变 | (value: string | number | boolean) => void |

Radio Slots

插槽名	说明
default	单选默认显示的内容
left	单选左边显示的内容，这时单选按钮会在右边

RadioGroup Props

属性名	说明	类型	默认值	可选值
model-value/v-model	radio 单选框组绑定的值	String \| Number ｜ Boolean	-	-
size	单选框尺寸	String	-	`sm` / `lg`
disabled	radio 单选框是否禁用	Boolean	`false`	`true`
label-disabled	radio 禁止点击标签进行选择	Boolean	`false`	`true`
border	是否显示边框	Boolean	`false`	`true`
active-color	radio 激活时的颜色，以 tn 开头则使用图鸟内置的颜色只支持普通颜色	String	-	颜色
wrap	radio 内容是否独占一行	Boolean	`false`	`true`
validate-event	值发生修改时是否触发表单验证	Boolean	`true`	`false`

RadioGroup Events

事件名	说明	类型
change	选中的值发生改变	`(value: string \| number \| boolean) => void`

RadioGroup Slots

插槽名	说明	子标签
default	自定义默认内容	`TnRadio`

TnRadio-单选框 ​

组件位置 ​

平台差异说明 ​

基本使用 ​

单TnRadio使用 ​

TnRadio配合TnRadioGroup使用 ​

禁止点击标签进行选择 ​

通过slot自定义内容 ​

API ​

Radio Props ​

Radio Events ​

Radio Slots ​

RadioGroup Props ​

RadioGroup Events ​

RadioGroup Slots ​