demo-library/library-activity/src/components/aitoast/aitoast.vue

<template>
	<div class="tishi-di" v-if="data.ifs">
		<div class="tishi">
			{{toastmassage}}
		</div>
	</div>
</template>

<script>
	import { reactive,computed,onMounted,watch  } from 'vue';
	export default {
		props: {
		  toastmassage: {
		    type: String,
		    default: ''
		  },
		  iftshow: {
		    type: Number,
		    default: 0
		  }
		},
		setup(props){
			const data = reactive({
				timer:null,
				ifs:false
			})
			watch(() => props.iftshow, (oldVlaue, newValue) => {
				data.ifs = true;
			})
			watch(() => data.ifs, (oldVlaue, newValue) => {
				let that = data;
				clearTimeout(that.timer); 
				that.timer = null;
				that.timer=setTimeout(function(){
				  	that.ifs = false;
				},1500)
			})
			return {
				data
			}
		}
	}
</script>

<style>
.tishi-di{
	width: 100%;
	position: fixed;
	bottom: 16%;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.tishi{
	padding: 0.18rem 0.40rem;
	background-color: rgb(226,226,226,0.9);
	font-size: 0.28rem;
	color: #222222;
	border-radius: 0.04rem;
}
</style>