aiot-app/components/MySearch/MySearch.vue

<template>

	<u-popup lock-scroll :show="show" closeOnClickOverlay mode="top" @close="close" @open="open">
		<view class="container">
			<u--form ref="form" labelPosition="left" :model="formData" labelWidth="180" labelAlign="left">
				<block v-for="(item, index) in formItems" :key="index">
					<!-- <slot name='slot'></slot> -->
					<u-form-item :label="item.label" :prop="item.prop">
						<component :is="item.component" v-model="formData[item.prop]" v-bind="item.props"
							v-on="item.events" />
					</u-form-item>
				</block>

			</u--form>

			<view class="action">
				<u-button text="重置" shape="circle" style="color: #000;" @click="reset"></u-button>
				<u-button type="primary" text="确定" shape="circle" @click="search"></u-button>
			</view>
			
			

		</view>
	</u-popup>

</template>

<script>
	import MyInput from '@/uni_modules/uview-ui/components/u--input/u--input.vue'
	import MyPicker from '@/uni_modules/uview-ui/components/u-picker/u-picker.vue'
	import MyDateRange from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'


	export default {
		name: "MySearch",
		components: {
			MyInput,
			MyPicker,
			MyDateRange
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			formItems: {
				type: Array,
				default: () => []
			},
			initialData: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				formData: {},
			};
		},
		watch: {
			initialData: {
				handler(newVal) {
					this.formData = {
						...newVal
					};
				},
				deep: true
			}
		},
		methods: {
			
			
			
			change(){
				console.log(this);
			},
			open() {

			},
			close() {
				this.$emit('update:show', false)
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			reset() {
				this.formData = {}
				console.log(this.formData);
			},
			search() {
				this.close()
				this.$emit('search',this.formData)
			}
		},
		created() {
			console.log(this);
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
	}

	/deep/.u-form-item__body {
		padding: 16rpx 0
	}

	/deep/.uni-date__icon-clear {
		border: none !important;
		transform: translateY(25%);
	}

	.action {
		padding: 20rpx;
		display: flex;

	}

	/deep/.u-button {
		width: 40%;
	}

	.form-button-container {
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
	}
</style>