TMUI4x(鸿蒙Next)

Appearance

广告位招租意向联系我
TMUI4x2025-09-03
636
2.6m

单选框 xRadio ​

在线预览
在线模拟尺寸:

介绍 ​

使用时,x-radio能单独使用，如果要与x-radio-group配合，从1.1.2开始允许是非直接x-radio-group子节点布局,但考虑到性能建议是直接子节点.

平台兼容 ​

H5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑️☑️☑️☑️4.44+1.1.9

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-radio/x-radio.uvue

使用 ​

ts

<x-radio></x-radio>

Props 属性 ​

名称说明类型默认值
color当前主题色，空值时取全局string""
unCheckColor当前未选中时主题色，空值时取全局string""
darkUnCheckColor当前未选中时的暗黑主题色string""
modelValue由于uniappx 截止3.98<br>不支持联合类型，因此当前只支持string类型，后期如果官方支持<br>可扩展为string,number,booleanstring""
defaultChecked非受控下默认选中的状态booleanfalse
value选中的值<br>由于uniappx 截止3.98<br>不支持联合类型，后期如果官方支持<br>可扩展为string,number,booleanstring"1"
unCheckValue未选中的值<br>由于uniappx 截止3.98<br>不支持联合类型，后期如果官方支持<br>可扩展为string,number,booleanstring""
disabled是否禁用booleanfalse
icon选中的图标名称。string"checkbox-blank-circle-fill"
label右侧文字。string""
hiddenCheckbox是否隐藏选中框。然后利用默认插槽自定义选中所有样式和状态。booleanfalse
size尺寸string"24"
iconSize中间小图标大小string"20"
labelFontSize文字大小string"15px"
labelSpacelabel和选中框间的间距string'10'
onlyChecked是否允许取消选中.之前因为大家的需求不一样<br>有的人需要允许取消选中,有的人不需要取消选中<br>现在单独开这个属性各取所需,出现这个属性时,group或者单个使用时将不允许取消选中,至少保留一项选择.<br>这个属性我不能设置默认为true,因为要向下兼容,所有需要的人麻烦自己设置为truebooleanfalse

Events 事件 ​

名称参数说明
change**check** : boolean**value** : number用户交互切换，选中变换时触发。
click-点击事件
update:modelValue-当前选中的值，等同v-model

Slots 插槽 ​

名称说明数据
label默认文本插槽checked : boolean
checked : string
value : boolean
value : string

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/biaodan/radio

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">单选框 xRadio</x-text>
			<x-text  color="#999999" >
				由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是string，待后续官方兼容类型推断
				允许单个使用，与checkbox无异。组合使用时只能选一个。
			</x-text>
		</x-sheet>
		<x-loading v-if="loading"></x-loading>
		<view v-if="!loading">

			<x-sheet class="flex flex-row">
				
				<x-radio label="苹果"></x-radio>
				<x-radio color="error" unCheckColor="black" darkUnCheckColor="#999999" class="ml-12" label="香蕉"></x-radio>
				<x-radio color="warn" model-value="1"  unCheckColor="error" class="ml-12" label="豆腐"></x-radio>
				<x-radio :disabled="true"   color="success" unCheckColor="warn" class="ml-12" label="我被禁用"></x-radio>
			</x-sheet>
			<x-sheet>
				<x-radio unCheckColor="primary" >
					<template #label><x-text >由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是string，待后续官方兼容类型推断</x-text></template>
				</x-radio>
				<x-radio color="error" unCheckColor="error"  class="mt-16">
					<template #label><x-text >由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是string，待后续官方兼容类型推断</x-text></template>
				</x-radio>
				<x-radio :only-checked="true" color="error" unCheckColor="error"  class="mt-16">
					<template #label><x-text >单个使用,设置选中后不允许取消,点我!</x-text></template>
				</x-radio>
				<x-radio-group direction='column'>
					<x-radio color="error" unCheckColor="error"  class="mt-16">
						<template #label>
							<view style="width: 99%;">
								<x-text >由于uniappx3.98不支持联合类型推断，因此选中和未选中值只能是string，待后续官方兼容类型推断</x-text>
							</view>
						</template>
					</x-radio>
				</x-radio-group>
				
			</x-sheet>
			<x-sheet>
				<x-text font-size="18" class=" text-weight-b mb-8">通过插槽完全自定样式</x-text>
				<x-text color="#999999" >不需要再引入其它变量，可通过插槽变量控制样式</x-text>
			</x-sheet>
			<x-sheet>
				<x-radio :hidden-checkbox="true">
					<template #label="{checked,value}">
						<x-sheet :margin="['0']" :color="checked?'primary':'info'"
							class="flex flex-row flex-row-center-start">
							<x-radio :model-value="value" color="warn"></x-radio>
							<x-text :class="[checked?'text-white':'text-black']" >{{checked}}点击我来切换选中</x-text>
						</x-sheet>
					</template>
				</x-radio>

				<x-radio :hidden-checkbox="true">
					<template #label="{checked,value}">
						<x-sheet :margin="['0','16','0','0']" :color="checked?'success':'info'"
							class="flex flex-row flex-row-center-start">
							<x-radio :model-value="value" :color="checked?'warn':'error'"></x-radio>
							<x-text :class="[checked?'text-white':'text-black']" >{{checked}}点击我来切换选中</x-text>
						</x-sheet>
					</template>
				</x-radio>

			</x-sheet>
			<x-sheet>
				<x-text font-size="18" class=" text-weight-b">修改选中的图标</x-text>
			</x-sheet>
			<x-sheet class="flex flex-row">
				<x-radio model-value="1" icon="check-double-line" label="苹果"></x-radio>
				<x-radio model-value="1" icon="thunderstorms-fill" color="error" class="ml-12"
					label="香蕉"></x-radio>
				<x-radio model-value="1" icon="flutter-fill" color="success" class="ml-12" label="香蕉"></x-radio>
			</x-sheet>

			<x-sheet>
				<x-text font-size="18" class=" text-weight-b mb-8">单选框组 x-radio-group</x-text>
				<x-text color="#999999" >使用时,x-radio只能是x-radio-group的直接子节点</x-text>
				<x-text color="#999999" >{{checkbox}},选项组时value是唯一值，不可重复。</x-text>
			</x-sheet>
			
			<x-sheet>
				<!-- 不允许全部取消,至少要选中一项. -->
				<x-radio-group  v-model="checkbox">
					<x-radio :onlyChecked="true" v-for="(item,index) in list" :key="index" class="pr-12 mb-12" :label="item.label"
						:value="item.id"></x-radio>
				</x-radio-group>
				<x-button :block="true" @click="checkbox = '4'">赋值4</x-button>
			</x-sheet>
			
			<x-sheet>
				<x-radio-group v-model="checkbox" direction="column">
					<view hover-class="opacity-5" :hover-stay-time="100" @click="checkbox = item.id" v-for="(item,index) in list" :key="index" class="flex flex-row flex-row-center-between">
						<x-text>{{item.label}}</x-text>
						<x-radio style="pointer-events: none;" class="py-12" :value="item.id" labelSpace="0"></x-radio>
					</view>
				</x-radio-group>
			</x-sheet>
			

			
		</view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script>
	type listtype = {
		label : string,
		id : string
	}
	export default {
		data() {
			return {
				loading:true,
				checkbox: "" ,
				checkbox2:  "" ,
				indeterminate: false,
				checked: "",
				list: [
					{ label: "香蕉", id: "1" } as listtype,
					{ label: "豆腐", id: "2" } as listtype,
					{ label: "苹果", id: "3" } as listtype,
					{ label: "大豆", id: "4" } as listtype,
					{ label: "李子", id: "5" } as listtype,
				] as listtype[]
			};
		},
		onReady() {
			this.loading = false;
		}
	}
</script>

<style lang="scss">

</style>
最近更新