pinganxiaoyuan/monitorMobile/components/selectRadio.vue

<template>
	<view @touchmove.stop @touch.stop>
		<myCell v-show="cellVisible" :title="title_" isLink :border="false" :hasValue="value?true:false"
			@click="cellClick" :align="align"></myCell>
		<u-popup :show="show" mode="center" :round="10" @close="close" @open="open">
			<view style="max-height: 800rpx;overflow-y: auto;">
				<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>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import myCell from "@/components/cell.vue"
	export default {
		name: "selectRadio",
		components: {
			myCell
		},
		props: {
			value: {
				default: "",
			},
			options: {
				default: [],
				type: Array
			},
			title: {
				default: "",
			},
			placeholder: {
				default: "请选择",
			},
			cellVisible: {
				default: true,
			},
			align: {
				default: "left",
			},
		},
		data() {
			return {
				show: false,
				title_: this.title || this.placeholder,
				value_: this.value,
			};
		},
		mounted() {
			if (this.value) {
				let obj = this.options.find(e1 => e1.value == this.value)
				if (obj) this.title_ = obj.label
			}
		},
		methods: {
			cellClick() {
				if (!this.options.length) {
					this.TOAST('暂无数据')
					return
				}
				this.show = true
			},
			close() {
				this.show = false
			},
			open() {
				let obj = this.options.find(e1 => e1.value == this.value)
				this.title_ = obj ? obj.label : this.placeholder
				this.value_ = this.value
				this.show = true
			},
			change(e) {
				this.$emit("input", e)
				this.$emit("change", e)
				let obj = this.options.find(e1 => e1.value == e)
				this.title_ = obj ? obj.label : this.placeholder
				this.close()
			},
		}
	}
</script>

<style scoped lang="scss">
	.u-radio-group {
		width: 560rpx;
		overflow-y: auto;
		padding: 12rpx 32rpx 24rpx 32rpx;

		.u-cell {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 24rpx 0;
		}
	}

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

	.u-radio {
		margin-top: 26rpx;
		padding-bottom: 28rpx !important;
	}

	.u-radio:last-child {
		border-bottom: none;
		padding-bottom: 14rpx !important;
	}
</style>