pinganxiaoyuan/monitorMobile/components/selectRadio.vue

<template>
	<view>
		<myCell v-if="cellVisible" :title="title_" isLink :border="false" @click="show = true"></myCell>
		<u-popup :show="show" mode="center" :round="10" @close="close" @open="open">
			<u-radio-group v-model="value_" iconPlacement="right" placement="column" @change="change" borderBottom>
				<u-radio v-for="(item,index) in options" :key="index" :label="item.label" :name="item.value"></u-radio>
			</u-radio-group>
		</u-popup>
	</view>
</template>

<script>
	import myCell from "@/components/cell.vue"
	export default {
		name: "selectRadio",
		components:{
			myCell
		},
		props: {
			value: {
				default: "",
				type: String | Number
			},
			options: {
				default: [],
				type: Array
			},
			title:{
				default: "",
				type: String
			},
			cellVisible:true,
		},
		data() {
			return {
				show: false,
				title_:this.title,
				value_:this.value,
			};
		},
		mounted() {
			if(this.value){
				let obj = this.options.find(e1=>e1.value == this.value)
				if(obj) this.title_ = obj.label
			}
		},
		methods: {
			close() {
				this.show = false
			},
			open(){
				let obj = this.options.find(e1 => e1.value == this.value)
				if (obj) this.title_ = obj.label
				this.title_ = obj ? obj.label : this.title
				this.value_ = this.value
			},
			change(e) {
				this.$emit("update:value",e)
				let obj = this.options.find(e1=>e1.value == e)
				if(obj) this.title_ = obj.label
				this.$emit("change")
			},
		}
	}
</script>

<style scoped lang="scss">
	.u-radio-group {
		width: 550rpx;
		max-height: 680rpx;
		overflow-y: auto;
		padding: 0 24rpx;
		.u-cell {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 24rpx 0;
		}
	}

	.u-border-bottom {
		border-color: #F6F6F6 !important;
	}

	.u-radio {
		margin-top: 18rpx;
	}
</style>