# tui-radio 单项选择器 会员组件

介绍

单项选择器,支持放大缩小,支持自定义颜色。

注意

该组件需要结合 tui-radio-group 组件一起使用。

微信小程序端 tui-radio-group 组件内使用到了 tui-form-field 组件,所以需要同时引入这些组件到项目中。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiRadio from "@/components/thorui/tui-radio/tui-radio.vue"
import tuiRadioGroup from "@/components/thorui/tui-radio-group/tui-radio-group.vue"
export default {
	components:{
		tuiRadio,
		tuiRadioGroup
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
	"tui-radio": "/components/thorui/tui-radio/tui-radio",
    "tui-radio-group": "/components/thorui/tui-radio-group/tui-radio-group"
  }
}

# 代码演示

部分代码片段演示,具体可参考示例程序以及文档API。

推荐展示 | 改变颜色
    <!--uni-app-->
    <tui-radio-group>
     <tui-label v-for="(item,index) in radioItems" :key="index">
     	<tui-list-cell>
     		<view class="thorui-align__center">
     			<tui-radio :checked="item.checked" :value="item.value" color="#07c160" borderColor="#999">
     			</tui-radio>
     			<text class="tui-text">{{item.name}}</text>
     		</view>
     	</tui-list-cell>
     </tui-label>
    </tui-radio-group>
    
    // data 数据 及 方法
    export default {
     data() {
     	return {
     		radioItems: [{
     			name: '中国',
     			value: '1',
     			checked: true
     		   },
     		   {
     			name: '美国',
     			value: '2',
     			checked: false
     		   },
     		   {
     			name: '俄罗斯',
     			value: '3',
     			checked: false
     		}]
     	}
     },
     methods: {
     	
     }
    }
    
    .thorui-align__center {
    	display: flex;
    	align-items: center;
    }
    .tui-text {
    	font-size: 30rpx;
    	padding-left: 12rpx;
    }
    
    <!--微信小程序-->
    <!-- 示例中使用到的组件请自行引入 -->
    <tui-radio-group>
     <tui-label wx:for="{{radioItems}}" wx:key="index">
      <tui-list-cell>
       <view class="thorui-align__center">
     	<tui-radio checked="{{item.checked}}" value="{{item.value}}" color="#07c160" borderColor="#999">
     	</tui-radio>
     	<text class="tui-text">{{item.name}}</text>
       </view>
      </tui-list-cell>
    </tui-label>
    </tui-radio-group>
    
    // data 数据 及 方法
    Page({
      data: {
        radioItems: [{
     		name: '中国',
     		value: '1',
     		checked: true
     	   },
     	   {
     		name: '美国',
     		value: '2',
     		checked: false
     	   },
     	   {
     		name: '俄罗斯',
     		value: '3',
     		checked: false
        }]
      }
    })
    
    .thorui-align__center {
    	display: flex;
    	align-items: center;
    }
    .tui-text {
    	font-size: 30rpx;
    	padding-left: 12rpx;
    }
    
    // Make sure to add code blocks to your code group

    # tui-form-field

    此组件只为form表单提交传递数据使用,暂时仅用于微信/百度小程序

    # Slots

    插槽名称 说明
    default 标签显示内容,将控件放入标签内

    # Props

    属性名 类型 说明 默认值
    hidden Boolean 是否为隐藏域 false

    # Events

    事件名 说明 回调参数
    - - -

    # tui-radio-group

    单项选择器,内部由多个 tui-radio 组成。通过把多个tui-radio包裹在一个tui-radio-group下,实现这些tui-radio的单选。

    # Slots

    插槽名称 说明
    default 标签显示内容,将控件放入标签内

    # Props

    属性名 类型 说明 默认值
    name String 表单中名称 -
    value String 选择的value值,用于双向绑定 -
    modelValue String 选中的value值,用于双向绑定,vue3使用 -

    # Events

    注:uni-app端绑定事件使用@前缀,如@change;微信小程序原生使用bind前缀,如bindchange

    事件名 说明 回调参数
    change tui-radio-group中的选中项发生变化时触发 change 事件 event.detail = {value: 选中项tui-radio的value}
    input 用于组件双向绑定,使用v-model指令即可 value
    update:modelValue vue3 用于组件双向绑定,使用v-model指令即可,仅uni-app modelValue

    注:获取选中的值也可以直接使用双向绑定获取,uni-app端为 v-model 指令,微信小程序端为 model:value

    # tui-radio

    单选项目。

    # Slots

    插槽名称 说明
    - -

    # Props

    属性名 类型 说明 默认值
    value String value值,当选中时会携带该值 -
    checked Boolean 当前是否选中 false
    disabled Boolean 是否禁用 false
    color String radio选中背景颜色 #5677fc
    borderColor String radio未选中时边框颜色 #ccc
    isCheckMark Boolean 是否只展示对号,无边框背景 false
    checkMarkColor String 对号颜色 #fff
    scaleRatio [Number, String] radio缩放倍数,改变radio大小 1

    # Events

    事件名 说明 回调参数
    - - -

    # 预览

    请以移动端效果为准,touch事件目前尚未在PC端做兼容。

    # 特别说明

    该组件为 会员组件,非开源内容,需开通会员才可获取使用。

    # 线上程序扫码预览

    ThorUI组件库 H5二维码 ThorUI示例
    ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码
    Last Updated: 7/21/2023, 2:12:46 PM