uniProject/components/dialog/nichengDialog.vue

<!-- 小弹窗 一行文字 -->
<template>
	<uni-popup ref="tipSmallPopup" :animation="false" :is-mask-click="false"
	 mask-background-color="rgba(0,0,0, 0.76);">
	 <view class="ezy-tip-dialog tip-small-dialog duihuan-dialog">
		<view class="tip-content-box">
			<view class="tip-title">{{title}}</view>
				<input class="duihuan-input" type="text" focus v-model="nichengValue" placeholder="请输入昵称" />
				<view class="tip-btn-box">
					<ezyActiveVue class="ezy-btn-active not-confirm-btn" @aclick="handleClose">取消</ezyActiveVue>
					<ezyActiveVue class="ezy-btn-active confirm-btn" @aclick="confirmBtn">确认</ezyActiveVue>
				</view>
		</view>
	 </view>
	</uni-popup>
</template>

<script setup>
	import { ref } from 'vue';
	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
	import {
		toast,
	} from "@/utils/common";
	const props = defineProps({
	  title: {
	    type: String,
	    default: '提示'
	  },
	  content: {
	    type: String,
		require: true,
	    default: ''
	  },
	});
	const tipSmallPopup = ref(null); // 索引
	const nichengValue = ref(''); // 索引
	const $emit = defineEmits(['confirm-btn'])
	// 打开弹窗
	function handleShow() {
		tipSmallPopup.value.open();
	}
	// 取消
	function handleClose() {
		nichengValue.value = ''
		tipSmallPopup.value.close();
	}
	// 确认
	function confirmBtn(){
		
		if (!nichengValue.value) {
			toast('请输入昵称')
			return;
		}
		
		$emit('confirm-btn',nichengValue.value);
		tipSmallPopup.value.close();
		nichengValue.value = ''
	}
	defineExpose({
			handleShow
		})
</script>

<style>
</style>