zhywpt-sp/components/search-picker/search-picker.vue

<!-- 有搜索功能的picker -->

<template>
	<view class="date-background" v-show="state.flag">
		<view class='date-gray-background' @click="cancelPicker"></view>
		<view class='date-container'>
			<view class="transparent">
				<view class='date-confirm'>
					<view @click="cancelPicker" class="pickerCancel">取消</view>
					<u-input v-model="state.keywords" placeholder="请输入搜索关键词" :border="true" :auto-height="false"
						:adjust-position="false" style="flex:1;" @input='searchChange' height="65"></u-input>
					<view @click="confirm" class="pickerConfirm">确定</view>
				</view>

				<picker-view indicator-class="indicator" :value="state.setValue" @change="bindChange"
					indicator-style="height: 100rpx;" mask-style="height:900rpx;"
					style="width: 100%; height: 80%;position:absolute;bottom:0rpx;text-align:center;background:white">
					<picker-view-column class="pickViewColumn">
						<view v-for="item in state.dataList" :key="item" style="line-height: 68rpx">{{item}}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, reactive, watch } from "vue";

	const emits = defineEmits(['update:modelValue', 'hidePicker'])

	const props = defineProps({
		dataSource: {
			type: Array,
			default: null
		},
		value: {
			type: Array,
			default() {
				return [0]
			}
		},
		visible: {
			type: Boolean,
			default: false
		}
	})
	onMounted(() => {
		state.flag = props.visible;
		state.dataList = props.dataSource;
	})
	const state = reactive({
		flag: false, //是否显示
		keywords: '', // 搜索值
		setValue: [0], // picker 选择值
		dataList: [],
		selectValue: '', //选择的值
	})

	watch(() => props.dataSource, (newVal, oldVal) => {
		state.dataList = newVal;
	});
	watch(() => props.visible, (newVal, oldVal) => {
		state.flag = newVal;
	});

	function bindChange(e) {
		let value = e.detail.value.toString();
		state.dataList.forEach((item, index) => {
			if (value == index) {
				state.selectValue = item as string;
			}
		});
	}

	function confirm(e) {
		state.flag = !state.flag;
		if (!state.selectValue) {
			state.selectValue = state.dataList[0];
		}
		emits('update:modelValue', state.selectValue);
		emits('hidePicker', false);
	}

	// 搜索查询
	function searchChange(val) {
		state.setValue = [0];
		state.selectValue = '';
		state.dataList = props.dataSource.filter((item) => (item as string).indexOf(val) > -1);
	}

	function showDatePicker() {
		state.flag = !state.flag
	}

	const cancelPicker = () => {
		state.flag = !state.flag
		emits('hidePicker', false);
	}

	defineExpose({
		showDatePicker
	})
</script>

<style lang='scss' scoped>
	.date-background {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
	}

	.date-gray-background {
		position: absolute;
		width: 100%;
		top: 0rpx;
		background: rgba(0, 0, 0, .5);
		height: 100vh;
	}

	.chaxunjieguo {
		width: 100%;
		height: 500rpx;
		overflow: scroll;
		color: black;
	}

	.chaxunjieguo text {
		display: block;
		text-align: center;
		padding-bottom: 10rpx;
	}

	.date-container {
		position: absolute;
		width: 100%;
		height: 600rpx;
		overflow: hidden;
		background: #fff;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	.date-confirm {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		font-size: 34rpx;
	}

	.pickViewColumn {
		height: 600rpx;
	}

	.indicator {
		height: 80rpx;
	}

	.pickerCancel {
		font-size: 30rpx;
		color: #777;
		margin-right: 30rpx;
	}

	.pickerConfirm {
		font-size: 30rpx;
		color: #4C83D6;
		margin-left: 30rpx;
	}
</style>