uniProject/pages/my/components/birthdayDialog.vue

<template>
	<uni-popup ref="birthdayPopup" :animation="false" :is-mask-click="false"
	 mask-background-color="rgba(0, 0, 0, 0.4)">
	 <view class="phone-common-dialog birthday-dialog">
		<view class="common-body-box">
			<uni-calendar
				ref="calendar"
				:insert="true"
				@change="dataConfirm"
				 />
			<view class="common-btn-box">
				<view class="not-confirm-btn" @click="handleClose">{{notBtn}}</view>
				<view class="confirm-btn" @click="confirmBtn">{{okBtn}}</view>
			</view>
		</view>
	 </view>
	</uni-popup>
</template>

<script setup>
	import {ref,reactive} from "vue"
	import {toast} from "@/utils/common";
	const props = defineProps({
	  notBtn: {
	    type: String,
	  	require: true,
	    default: '取消'
	  },
	  okBtn: {
	    type: String,
	  	require: true,
	    default: '确认'
	  },
	});
	const time= ref('');
	const birthdayPopup = ref(null); // 索引
	const $emit = defineEmits(['confirm-btn'])
	
	function passClear(){
		time.value = '';
	}
	
	function dataConfirm(data){
		time.value = data.fulldate;
	}
	
	// 打开弹窗
	function handleShow() {
		birthdayPopup.value.open();
	}
	// 取消
	function handleClose() {
		passClear();
		birthdayPopup.value.close();
	}
	// 确认
	function confirmBtn(){
		if(time.value){
			$emit('confirm-btn',time.value);
			passClear();
			birthdayPopup.value.close();
		}else{
			toast('请选择日期')
		}
		
	}
	defineExpose({
			handleShow,
			handleClose
		})
</script>

<style>
</style>