【记录】查询弹窗组件封装demo

我的uniapp项目中有很多带查询条件的列表，查询条件各不相同，根据需求做了一个简单的demo，简单记录一下：

用到了vue父子组件通信,插槽

目录是这样的：

search.vue 调用：

<template>
	<view class="search-box">
		<button type="primary" size="mini" @click="search">搜索</button>
		<SearchModel
			:showPop="popupVisible"
			@closePop = "closePop"
			@searchPop = "searchPop"
			>
			<template v-slot:content>
				<uni-forms :modelValue="formData">
					<uni-forms-item label="姓名" name="name">
						<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="日期" name="datetimesingle">
						<uni-datetime-picker type="date" v-model="formData.datetimesingle" placeholder="请选择日期" />
					</uni-forms-item>
				</uni-forms>
			</template>
		</SearchModel>
	</view>
</template>

<script>
	import SearchModel from './SearchModel.vue'
	export default {
		data() {
			return {
				formData:{
					name:'',
					datetimesingle:''
				},
				popupVisible:false
			}
		},
		methods: {
			search() {
				this.popupVisible = true
			},
			//搜索弹窗关闭
			closePop(data){
				this.popupVisible = data
			},
			//搜索弹窗确认
			searchPop(data){
				this.popupVisible = data
				console.log("搜索条件",this.formData)
			},
		},
		components:{
			SearchModel
		}
	}
</script>
<style lang="scss" scoped>
	.search-box{
		padding:20px;
	}
</style>

SearchModel.vue 组件:

<template>
	<view class="popup-box">
		<uni-popup 
			ref="popup" 
			:is-mask-click="false"
			background-color="#fff">
			<view class="popup-content">
				<slot name="content"></slot>
				<view class="button-group">
					<button type="default" size="mini" class="btn" @click="cancel">关闭</button>
					<button type="primary" size="mini" class="btn" @click="search">搜索</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props:{
			showPop: {
				type: Boolean,
				required: true
			},	
		},
		watch: {
			showPop:{
				handler: function(newVal, oldVal) {
					this.isShow = newVal;
					if (this.isShow == true) {
						this.$nextTick(() => {
							this.$refs.popup.open("top")
						})
					} else {
						this.$nextTick(() => {
							this.$refs.popup.close()
						})
					}
				}
			}	
		},
		data() {
			return {
				isShow: false,
			}
		},
		methods: {
			cancel(){
				this.$emit("closePop", false)
			},
			search(){
				this.$emit("searchPop",false)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.popup-box{
		padding:20px;
		::v-deep {
			[name="content"]  {
			  transform: none !important;
			}
		}
	}
	.popup-content{
		padding:20px;
	}
	.button-group{
		margin-left:70px;
		.btn{
			margin-right:10px;
		}
	}
	
</style>