pinganxiaoyuan/monitorMobile/components/selectSearch.vue

<template>
	<view>
		<myCell :title="title_" isLink :border="false" @click="show = true"></myCell>
		<u-popup :show="show" mode="bottom" :closeable="true" :round="10" @close="close" @open="open">
			<view>
				<view class="title">
					{{'请选择' + popupTitle}}
				</view>
				<view style="padding: 0 30rpx 30rpx 30rpx">
					<u-search v-model="searchText" :placeholder="'请输入'+(searchPlaceHolder||popupTitle)" shape="round"
						:showAction="false"></u-search>
				</view>
				<u-radio-group :value="value_" iconPlacement="right" placement="column" @change="change" borderBottom>
					<u-radio v-show="item.label.includes(searchText)" v-for="(item,index) in options" :key="index" :label="item.label"
						:name="item.value"></u-radio>
				</u-radio-group>
				<view style="padding: 36rpx 50rpx">
					<u-button @click="cofirm" type="primary" style="border-radius: 36rpx;height: 72rpx;"
						text="确定"></u-button>
				</view>
			</view>
		</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
			},
			popupTitle: {
				default: "",
				type: String
			},
			searchPlaceHolder: {
				default: "",
				type: String
			},
		},
		data() {
			return {
				show: false,
				title_: this.title,
				value_: this.value,
				radioValue: '',
				searchText: ''
			};
		},
		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.popupTitle || this.title)
				this.value_ = this.value
				this.searchText = ''
			},
			change(e) {
				this.radioValue = e
			},
			cofirm() {
				this.$emit("update:value", this.radioValue)
				this.$emit("change", this.radioValue)
				let obj = this.options.find(e1 => e1.value == this.radioValue)
				if (obj) this.title_ = obj.label
				this.close()
			},
		}
	}
</script>

<style scoped lang="scss">
	.title {
		color: #000000;
		font-size: 32rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.u-radio-group {
		width: 92%;
		max-height: 680rpx;
		overflow-y: auto;
		padding: 0 30rpx;

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

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

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