pinganxiaoyuan/monitorMobile/components/selectSearch.vue

<template>
	<view @touchmove.stop @touch.stop>
		<myCell v-show="cellVisible" :multiple="multiple" :hasValue="value?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: 0rpx 30rpx 30rpx 30rpx;">
					<u-search height="90rpx" :inputStyle="{fontSize:'30rpx'}" v-model="searchText" :placeholder="searchPlaceholder" shape="square"
						:showAction="false"></u-search>
				</view>
				<u-radio-group v-if="!multiple" v-model="value_" iconPlacement="right" placement="column" borderBottom>
					<u-radio labelSize="30rpx" 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" borderBottom>
					<u-checkbox labelSize="30rpx" 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: 45rpx;height: 90rpx;font-weight: 700;font-size: 32rpx;"
						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,
				searchText: '',
				cellValue: [],
			};
		},
		mounted() {
			if (this.multiple) this.value_ = []
			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.value_ = []
				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
			},
			cofirm() {
				this.$emit("input", this.value_)
				this.$emit("change", this.value_)
				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.close()
			},
		}
	}
</script>

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

	.u-checkbox-group,.u-radio-group {
		width: 92%;
		height: 780rpx;
		overflow-y: auto;
		padding: 0 30rpx;
		box-shadow: inset 0 0 20rpx rgba(0, 0, 0, 0.08);

		.u-radio,.u-checkbox {
			height: 98rpx;
			box-sizing: border-box;
			padding-bottom: 0rpx!important;
			margin-top: 0rpx!important;
		}
	}

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

	.u-radio {
		margin-top: 18rpx;
	}

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