pinganxiaoyuan/monitorMobile/components/selectSearch.vue

<template>
	<view @touchmove.stop @touch.stop>
		<myCell v-show="cellVisible" :multiple="multiple" :hasValue="value&&value.length?true:false" :cellValue="cellValue" :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 v-if="filterable" style="padding: 0 30rpx 30rpx 30rpx">
					<u-search v-model="searchText" :placeholder="searchPlaceholder" shape="round"
						:showAction="false"></u-search>
				</view>
				<u-radio-group v-if="!multiple" :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>
				<u-checkbox-group v-else v-model="value_" iconPlacement="right" placement="column" @change="change"
					borderBottom>
					<u-checkbox v-show="item.label.includes(searchText)" v-for="(item, index) in options" :key="index"
						:label="item.label" :name="item.value">
					</u-checkbox>
				</u-checkbox-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: "",
			},
			options: {
				default: [],
				type: Array
			},
			// 是否显示cell回显
			cellVisible: {
				default: true,
			},
			// cell回显默认文字
			placeholder:{
				default:'请选择'
			},
			// 弹框标题
			popupTitle: {
				default: "请选择",
				type: String
			},
			// 是否显示搜索
			filterable: {
				default: true,
			},
			// 搜索框默认文字
			searchPlaceholder: {
				default: "请输入",
				type: String
			},
			// 单选时候cell回显的文字
			title: {
				default: "",
			},
			// 是否多选
			multiple: {
				default: false,
			},
		},
		data() {
			return {
				show: false,
				title_: this.title||this.placeholder,
				value_: this.value,
				gruopValue: '',
				searchText: '',
				cellValue:[],
			};
		},
		mounted() {
			if (this.multiple) this.gruopValue = []
			if (!this.multiple) {
				let obj = this.options.find(e1 => e1.value == this.value)
				if (obj) this.title_ = obj.label
			} else {
				let arr = this.options.filter(e1 => this.value.includes(e1.value))
				this.cellValue = arr.map(e => e.label)
			}
		},
		methods: {
			close() {
				this.show = false
			},
			open() {
				if (this.multiple) this.gruopValue = []
				if (!this.multiple) {
					let obj = this.options.find(e1 => e1.value == this.value)
					if (obj) this.title_ = obj.label
				} else {
					let arr = this.options.filter(e1 => this.value.includes(e1.value))
					this.cellValue = arr.map(e => e.label)
				}
				this.value_ = this.value
				this.searchText = ''
				this.show = true
			},
			change(e) {
				this.gruopValue = e
			},
			cofirm() {
				this.$emit("input", this.gruopValue)
				this.$emit("change", this.gruopValue)
				if (!this.multiple) {
					let obj = this.options.find(e1 => e1.value == this.gruopValue)
					if (obj) this.title_ = obj.label
				} else {
					let arr = this.options.filter(e1 => this.gruopValue.includes(e1.value))
					this.cellValue = arr.map(e => e.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%;
		height: 680rpx;
		overflow-y: auto;
		padding: 0 30rpx;

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

	.u-checkbox-group {
		width: 92%;
		max-height: 680rpx;
		min-height: 360rpx;
		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;
	}

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