uniapp中的单选实例（ radio）

 radio-groupsd

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

属性说明

属性名	类型	默认值	说明
@change	EventHandle		<radio-group> 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}

radio

单选项目。

属性说明

属性名	类型	默认值	说明
value	String		<radio> 标识。当该 <radio> 选中时，<radio-group> 的 change 事件会携带 <radio> 的 value
checked	Boolean	false	当前是否选中
disabled	Boolean	false	是否禁用
color	Color		radio的颜色，同css的color

radio单选 (效果图，Html，Css，Script)

<template>
	<view class="content">
		<view class="title">
			<text>Radio用法写法</text>
		</view>
		<view class="radioInfo">
			<view class="dataInfo">
				<!-- 列表内容开始 -->
				<radio-group @change="radioChange">
					<view class="dataList" v-for="(item,index) in dataList" :key='index'
						@click="listClick(item.titleId)" :class="index === radioCurrent?'radiOn':''">
						<view class="textImg">
							<view class="img">
								<image :src="item.imgUrl" mode="widthFix"></image>
							</view>
							<view class="text">
								<text>{{item.title}}</text>
								<text>{{item.url}}</text>
							</view>
						</view>
						<view class="radioBox">
							<radio color="#2DCF8C" :value="item.titleId + ''" :checked="index === radioCurrent" />
						</view>
					</view>
				</radio-group>
				<!-- 列表内容结束 -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [{
					imgUrl: 'https://tilin.gitee.io/super_hero_preview/static/icons/uniapp.png',
					title: 'UniApp',
					url: 'https://uniapp.dcloud.io/',
					titleId: 1
				}, {
					imgUrl: 'https://tilin.gitee.io/super_hero_preview/static/icons/github.png',
					title: 'GitHub',
					url: 'https://github.com/',
					titleId: 2
				}, {
					imgUrl: 'https://gitee.com/assets/favicon.ico',
					title: 'Giee',
					url: 'https://gitee.com/',
					titleId: 3
				}, {
					imgUrl: 'https://www.runoob.com/wp-content/uploads/2017/01/vue.png',
					title: 'Vue',
					url: 'https://cn.vuejs.org/',
					titleId: 4
				}, {
					imgUrl: 'https://www.runoob.com/wp-content/uploads/2016/02/react.png',
					title: 'React',
					url: 'https://react.docschina.org/',
					titleId: 5
				}, {
					imgUrl: 'https://www.runoob.com/wp-content/uploads/2014/06/angular.jpg',
					title: 'AngularJS',
					url: 'https://www.angularjs.net.cn/',
					titleId: 6
				}],
				radioCurrent: null,
				dataFrom: {
					titleId: null //传的id
				}
			}
		},
		methods: {
			radioChange(evt) { //单个选择框点击
				this.dataFrom.titleId = parseInt(evt.detail.value) //如果需要通过点击来知道选择的是哪个商品的id
				console.log(this.dataFrom.titleId)
				for (let i = 0; i < this.dataList.length; i++) {
					if (this.dataList[i].titleId === evt.target.titleId) {
						this.radioCurrent = i;
						break;
					}
				}
			},
			listClick(titleId) { //整个数据点击
				this.dataFrom.titleId = titleId //如果需要通过点击来知道选择的是哪个商品的id
				for (let i = 0; i < this.dataList.length; i++) {
					if (this.dataList[i].titleId == titleId) {
						this.radioCurrent = i;
						break;
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.title {
			text-align: center;
			padding: 30rpx 0;

			text {
				color: #dedede;
				font-size: 55rpx;
				text-align: center;
				letter-spacing: 6rpx;
				text-shadow: 2rpx 2rpx 8rpx #000;
				opacity: .32;
			}
		}

		.radioInfo {
			.dataInfo {
				width: 90%;
				margin: 0 auto;

				.checkAll {
					display: flex;
					justify-content: space-between;
				}

				.radiOn {
					border: 1px solid #2DCF8C !important;
				}

				.dataList {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border: 1px solid #E7E9EE;
					padding: 20rpx;
					margin-bottom: 20rpx;

					.textImg {
						display: flex;
						align-items: center;

						.img {
							border: 1px solid #E7E9EE;
							padding: 10rpx;

							image {
								width: 90rpx;
								height: 90rpx;
								display: block;
							}
						}

						.text {
							padding-left: 20rpx;

							text {
								display: block;
								font-size: 30rpx;
								color: #000;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}
</style>

扩展

(1).radio取消选择

<template>
	<view>
		<view class="checkbox">
			<radio-group>
				<label v-for="(item,index) in scoreList" :key="index">
					<radio color="#007aff" :value="item.id + ''" :checked="item.id==numberCurrent"
						@click="number_change(index)" />
					<text>{{item.text}}</text>
				</label>
			</radio-group>
		</view>
		<view class="checkbox">
			<radio-group>
				<label v-for="(item,index) in scoreList" :key="index">
					<radio color="#007aff" :value="item.id + ''" :checked="item.id==tasteCurrent"
						@click="taste_change(index)" />
					<text>{{item.text}}</text>
				</label>
			</radio-group>
		</view>
		<button type="default" @click="add">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scoreList: [{ //评分标准
						text: '优',
						id: 1
					},
					{
						text: '中',
						id: 2
					}, {
						text: '差',
						id: 3
					}
				],
				numberCurrent: null,
				tasteCurrent: null
			}
		},
		methods: {
			add() {
				this.numberCurrent = null
				this.tasteCurrent = null
			},
			number_change(index) {
				if (this.numberCurrent == this.scoreList[index].id) {
					this.numberCurrent = null
				} else {
					this.numberCurrent = this.scoreList[index].id
				}
			},
			taste_change(index) {
				if (this.tasteCurrent == this.scoreList[index].id) {
					this.tasteCurrent = null
				} else {
					this.tasteCurrent = this.scoreList[index].id
				}
			},

		}
	}
</script>

(2).radio取消选择循环

<template>
	<view class="">
		<view class="list" v-for="(nameItem,nameIndex) in data" :key="nameIndex">
			<text>{{nameItem.name}}</text>
			<view class="checkbox">
				<radio-group>
					<label v-for="(item,index) in whether" :key="index" @click="whether_Change(nameItem,index)">
						<radio color="#007aff" :value="item.whetherId + ''"
							:checked="item.whetherId === nameItem.whetherCurrent" />
						<text>{{item.text}}</text>
					</label>
				</radio-group>
			</view>
			<view class="">
				<input type="text" placeholder="请填写" v-if="nameItem.whetherCurrent == 1" v-model="nameItem.input">
			</view>
		</view>
		<button type="default" @click="submit">提交</button>
	</view>
</template>

<script>
	import dateAndTime from "./time-week.js";
	export default {
		data() {
			return {
				whether: [{
						text: '是',
						whetherId: 1
					},
					{
						text: '否',
						whetherId: 2
					}
				],
				data: [{
						name: '张一',
						whetherCurrent: null,
						input: null
					},
					{
						name: '张二',
						whetherCurrent: null,
						input: null
					}, {
						name: '张三',
						whetherCurrent: null,
						input: null
					},
					{
						name: '张四',
						whetherCurrent: null,
						input: null
					}
				]
			}
		},
		mounted() {},
		methods: {
			whether_Change(item, index) { //是否到岗
				if (item.whetherCurrent == this.whether[index].whetherId) {
					item.whetherCurrent = null
				} else {
					item.whetherCurrent = this.whether[index].whetherId
				}
			},
			submit() {
				console.log(this.data)
			}
		}
	}
</script>