Web_TracerMethodology/components/tm-radio-group/tm-radio-group.vue

<template>
	<view class="tm-radio-group">
		<view v-if="label" class="label-view">
			<text>{{ label }}</text>
		</view>
		<view class="radio-group">
			<template v-for="(item, i) in list">
				<view class="radio-item" :key="i" @click="toggleSelect(item, i)">
					<text class="text">{{ item[setting.name] }}</text>
					<image class="icon" 
					  :src="`/static/${item[setting.value] === defaultValue ? 'check-radio' : 'check-no'}.png`"></image>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	/**
	 * 单选列表组合
	 * 芦荟
	 * 2021.2.2
	 * props：看下面，有注释说明
	 */
	export default {
		props: {
			// 渲染的数据
			list: {
				type: Array,
				default: []
			},	
			// 选中的数据 
			defaultValue: {
				type: Number | String,
				default: ''
			},
			// 单选列表组合名字
			label: {
				type: String,
				default: ''
			},
			// 单选组配置
			setting: {
				type: Object, 
				default: {
					value: 'value', // 设置当前选中的值（默认取value）
					name: 'name' // 当前显示的文字（默认取name）
				}
			}
		},
		methods: {
			/**
			 * 选中变化调用
			 * @param {Object} selectData 当前选中的对象
			 * @param {Object} index 当前选中下标
			 * 
			 * 返回的参数
			 * selectData[this.setting.value]: 当前选中的值
			 * selectData： 当前选中的整条数据
			 * index：      当前选中的下标
			 */
			toggleSelect(selectData, index){
				this.$emit(
				  'change', 
				  selectData ? selectData[this.setting.value] : '', 
					selectData, 
					index
				);
			}
		}
	}
</script>

<style lang="less">
	.tm-radio-group {
		
		.label-view {
			height: 47.5rpx;
			line-height: 45rpx;
			padding-left: 25rpx;
			
			>text {
				font-size: 22.5rpx;
				color: #666F80;
			}
		}
		
		.radio-group {
			padding-left: 25rpx;
			background-color: #fff;
			
			.radio-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 87.5rpx;
				border-bottom: 0.62rpx solid #DADEE6;
				padding-right: 25rpx;
				
				.text {
					font-size: 22.5rpx;
					color: #292C33;
				}
				
				.icon {
					width: 25rpx;
					height: 25rpx;
				}
			}
		}
	}
</style>