Radio 单选框

单选框组件一般用于只有一个选择的场景。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	兼容中	兼容中	兼容中	兼容中

基本使用

• 该组件需要搭配tn-radio-group组件使用，以便用户进行操作时，获得当前单选框组的选中情况，当然，您也可以单独对某个tn-radio进行事件监听
• 通过v-model给tn-radio-group组件绑定一个变量，这个绑定的变量是双向的(初始值只能是待选选项的值)，也就是说，您可以无需监听tn-radio或者tn-radio-group组件的change事件，也能知道哪个 被勾选了。

注意： 由于tn-radio组件需要由tn-radio-group组件提供参数值，这些父子组件间通过Vue的"provide/inject"特性注入依赖， 所以您必须使用tn-radio-group包裹tn-radio组件才能正常使用。

<template>
  <view class="">
    <tn-radio-group v-model="value" @change="radioGroupChange">
      <tn-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
        :disabled="item.disabled">
        {{item.name}}
      </tn-radio>
    </tn-radio-group>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
            name: 'apple',
            disabled: false
          },
          {
            name: 'banner',
            disabled: false
          },
          {
            name: 'orange',
            disabled: false
          }
        ],
        // tn-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
        value: 'orange',
      }
    },
    methods: {
      // 选中某个单选框时，由radio时触发
      radioChange(e) {
        // console.log(e);
      },
      // 选中任一radio时，由radio-group触发
      radioGroupChange(e) {
        // console.log(e);
      }
    }
  }
</script>

自定义选框形状

通过设置shape为square或者circle，将选框设置为方形或者圆形。

<tn-radio-group v-model="value">
	<tn-radio shape="circle">圆形</tn-radio>
    <tn-radio shape="square">方形</tn-radio>
</tn-radio-group>

自定义选中颜色

这里设置的是tn-radio的选框的背景颜色，设置activeColor参数进行配置。

<tn-radio-group v-model="value">
	<tn-radio activeColor="#AAAAAA">图鸟科技</tn-radio>
</tn-radio-group>

文本是否可以点击

通过设置disabledLabel可以配置点击文本是否。

<tn-radio-group v-model="value">
	<tn-radio :disabledLabel="true">文本不可以点击</tn-radio>
</tn-radio-group>

禁用Radio

设置disabled为true，即可禁用某个组件，让用户无法点击，禁用分为两种状态，一是未勾选前禁用，这时只显示一个灰色的区域。二是已勾选后 再禁用，会有灰色的已勾选的图标，但此时依然是不可操作的。

<tn-radio-group v-model="value">
	<tn-radio :disabled="true">不可被选中</tn-radio>
</tn-radio-group>

API

Radio-group Props

属性名	说明	类型	默认值	可选值
v-model	用于双向绑定单选框被选中的值，值为radio对应的名称	String	-	-
disabled	禁用选择可选框	Boolean	false	true
disabledLabel	禁止点击标签选择选项	Boolean	false	true
shape	可选框的形状	String	circle	square
activeColor	选中后选框的背景颜色	String	#01BEFF	-
size	radio的整体大小，单位rpx	Number	34	-
width	每个radio占用的宽度	String	auto	-
wrap	换行显示radio	Boolean	false	true
iconSize	图标大小，单位rpx	Number	20	-

Radio-group Slots

名称	说明
default	用于存放radio组件

Radio-group Event

事件名称	说明	回调参数
input	radio选择状态发生改变时触发	String:[元素为被选中的radio的name]
change	任意radio的状态发生改变触发	String:[元素为被选中的radio的name]

Radio Props

注意：tn-radio和tn-radio-group二者同名参数中，tn-radio的参数优先级比较高。

属性名	说明	类型	默认值	可选值
v-model	用于双向绑定单选框被选状态，如果将该变量设置为true，将会被选中	Boolean	false	true
name	radio组件标识名称	String|Number	-	-
disabled	禁用选择可选框	Boolean	false	true
disabledLabel	禁止点击标签选择选项	Boolean	false	true
shape	可选框的形状	String	circle	square
activeColor	选中后选框的背景颜色	String	#01BEFF	-
size	checkbox的整体大小，单位rpx	Number	34	-
labelSize	label标签的字体大小，单位rpx	Number	30	-
wrap	换行显示checkbox	Boolean	false	true
iconName	选框中的图标名称，使用TuniaoUI内置的图标名称	String	success	-
iconSize	图标大小，单位rpx	Number	20	-
labelColor	字体颜色	String	#080808	-
borderColor	边框颜色	String	#080808	-

Radio Slots

名称	说明
default	radioLabel的名称

Radio Event

事件名称	说明	回调参数
change	任意radio的状态发生改变触发	String:[元素为被选中的radio的name]