TMUI 3.1.1
键入关键记事 K

Appearance

On this page

组件库文档 tmui.design ​

单选框 Radio ​

Radio 单选框提供多种选值下选择唯一内容的组件，重要：使用时需配合radio-group使用，无法单独使用

🌶️ 单选框 Radio 示例 ​

查看模拟效果＋
示例模板
vue
<template>
	<tm-app>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="基础示例,更多见文档"></tm-text>
			<tm-divider></tm-divider>
			<view class="pb-24">
				<tm-text :label="radiolist ? radiolist : '请选择'"></tm-text>
			</view>

			<tm-radio-group v-model="radiolist" :defaultValue="radiolist">
				<tm-radio outlined value="apple" label="苹果基础示例"></tm-radio>
				<tm-radio color="orange" value="banner" label="香蕉"></tm-radio>
				<tm-radio color="pink" value="test" label="测试项"></tm-radio>
				<tm-radio color="green" value="other" label="其它水果"></tm-radio>
			</tm-radio-group>
			<tm-radio-group direction="customCol" v-model="radiolist"  :defaultValue="radiolist">
				<tm-radio outlined value="apple" label="苹果基础示例苹果基础示例苹果基础示例苹果基础示例苹果基础示例"></tm-radio>
				<tm-radio color="orange" value="banner" label="香蕉示例苹果基础示例苹示例苹果基础示例苹示例苹果基础示例苹"></tm-radio>
				<tm-radio color="pink" value="test" label="测试项示例苹果基础示例苹示例苹果基础示例苹"></tm-radio>
				<tm-radio color="green" value="other" label="其它水果示例苹果基础示例苹示例苹果基础示例苹"></tm-radio>
			</tm-radio-group>
		</tm-sheet>

		<tm-sheet :margin="[32, 0]">
			<tm-text :font-size="24" _class="text-weight-b" label="其它属性和checkbox一样，拥有丰富的属性设置"></tm-text>
			<tm-divider></tm-divider>
			<view class="pb-24">
				<tm-text :label="radiolist ? radiolist : '请选择'"></tm-text>
			</view>
			<tm-radio-group v-model="radiolist"  :defaultValue="radiolist">
				<tm-radio :beforeChecked="beforeChecked" value="apple" label="苹果异步选中"></tm-radio>
				<tm-radio color="orange" value="banner" label="香蕉"></tm-radio>
				<tm-radio disabled color="pink" value="test" label="测试项"></tm-radio>
				<tm-radio border-style="dashed" color="green" value="other" label="其它水果"></tm-radio>
			</tm-radio-group>
		</tm-sheet>
		<tm-sheet>
			<tm-text :font-size="24" _class="text-weight-b" label="按钮样式"></tm-text>
			<tm-divider></tm-divider>
			<tm-radio-group model="button" v-model="radio"  :defaultValue="radio">
				<tm-radio :value="true" label="选我呀"></tm-radio>
				<tm-radio :value="false" label="不要选我呀"></tm-radio>
				<tm-radio :value="false" label="不要选我呀"></tm-radio>
				<tm-radio :value="false" label="选我"></tm-radio>
				<tm-radio :value="false" label="不要选我呀"></tm-radio>
				<tm-radio :value="false" label="不要选我呀"></tm-radio>
			</tm-radio-group>
		</tm-sheet>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmIcon from '@/tmui/components/tm-icon/tm-icon.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
import tmRadio from '@/tmui/components/tm-radio/tm-radio.vue'
import tmRadioGroup from '@/tmui/components/tm-radio-group/tm-radio-group.vue'
const radio = ref(null)

const radiolist = ref(undefined)

function beforeChecked(e:any) {
	return new Promise((res) => {
		setTimeout(function () {
			res(true)
		}, 1000)
	})
}
</script>

🌶️ 兼容性 ​

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 Radio-group 参数 ​

本组件含有公共属性 公共属性

参数名类型默认值描述
disabledBooleanfalse是否禁用整个radio-group
modelValue / v-modelString / Number / Boolean""按钮组标题，显示在左上方
directionStringrow单选按钮排列方向，可选值为 row横排，col为竖排 ，customCol：当你为竖向排列，且文字多行，要自动断行时使用此
modelStringradio单选按钮的样式，可选值为：radio 正常单选样式,button 按钮样式
alignString'left'对齐方式：left,center,right

🌱 Radio 参数 ​

本组件含有公共属性 公共属性

参数名类型默认值描述
sizeNumber42单选框的大小
colorStringprimary单选框的颜色
roundNumber24单选框圆角值
borderNumber2单选框边框值
transprentBooleanfalse单选框背景是否透明
valueString / Boolean / Numbertrue单选框的值，可以为String，Number 以及 Boolean类型
v-modelString / Boolean / Numberfalse双向绑定，如果选中后以数组形式给出value值
labelString单选框显示内容
defaultCheckedBooleanfalse是否默认选中，不受modelValue控制，直接选中
beforeCheckedFunction / String / Booleanfalse选中前的勾子。返回false将阻止选中。也可以返回 Promise异步,函数内已经传递当前的value值，可以直接赋值取得。
disabledBooleanfalse是否禁用单选框
fontSizeNumber26label 显示内容的字体大小
iconStringtmicon-check选中状态图标名称，可自定义
customBooleanfalse是否隐藏原本的状态组件

🌹 Radio-group事件 ​

事件名参数返回数据描述
change/子组件radio的value值当radio选中改变时，返回子组件radio的value值

🌹 Radio事件 ​

事件名参数返回数据描述
change/value若当前项被点击，则返回true

🌽 slot插槽 ​

注意事项

由于uni中的vue3,是经常uni官方修改改.所以在使用带有插槽数据的组件时,如果使用了插槽来自定义内容那么就一定要标准的使用方法, 不可以使用简写,其它其它语法糖.

插槽名描述
default带有数据checked,用于模板内知道当前是否选中.
vue
<!-- 请注意我这里使用了标准的写法v-slot:default="{checked}" -->
<!-- 如果组件没有插槽数据,变成v-slot:default -->
<!-- 那怕你不使用数据,也要这么写.如果不写template v-slot:default="{checked}"> 将会产生兼容性,已知微信小程序会丢失插槽内容 -->
<tm-radio>
    <template v-slot:default="{checked}">
        <view class="flex flex-row">
            <tm-text label="我已经阅读并同意"></tm-text>
            <view >
                <tm-text   color="primary" label="《合作协议》"></tm-text>
            </view>
        </view>
    </template>
</tm-radio>

🥗 ref方法 ​

无

😡 贡献者 ​

Wicos