hlt_app/components/Modal/CustomToast.vue

<template>
	<!-- 自定义提示组件 -->
	<!-- 根据type展示成功、失败状态提示 -->
	<!-- 根据title/remark，配置提示的文字 -->
	<!-- 全局采用ref方式调用打开按钮，默认展示1500ms后关闭，也可以直接调用关闭事件-->
	<view class="custom-toast">
		<zwy-popup :ishide="isShow" width="660rpx" height="364rpx" radius="12rpx">
			<!-- 自定义展示内容 -->
			<view class="content">
				<view class="bg-box">
					<image style="width: 100%;height: 100%;" src="/static/images/components/modal/bg.svg" mode="scaleToFill"></image>
				</view>
				<view class="icon">
					<image style="width: 100%;height: 100%;" :src="`/static/images/components/modal/${toastInfo.type}.svg`" mode="scaleToFill"></image>
				</view>
				<view class="title">
					{{toastInfo.title}}
				</view>
				<view class="remark">
					{{toastInfo.remark}}
				</view>
			</view>
		</zwy-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		defineExpose
	} from 'vue';
	const isShow = ref(false)
	const timer = ref(null)
	const toastInfo = reactive({
		type: '',
		title: '',
		duration: 1500,
		remark: ''
	})
	const baseInfo = {
		success: {
			title: '操作成功',
			remark: '',
			duration: 1500
		},
		error: {
			title: '操作失败',
			remark: '',
			duration: 1500
		}
	}
	/**
	 * @description 打开弹窗
	 * @param option 配置项，可以单独配置类型、标题、描述、时间
	 * 如果没有类型，默认使用success，但其他参数还是可以覆盖
	 * @param option.type 类型：success/error
	 * @param option.title 标题
	 * @param option.remark 描述
	 * @param option.duration 持续时长
	 */
	const showToast = (option) => {
		let tempType = option?.type
		if (!tempType || !baseInfo[tempType]) {
			tempType = 'success'
		}
		toastInfo.type = tempType;
		toastInfo.title = option.title || baseInfo[tempType].title;
		toastInfo.remark = option.remark || baseInfo[tempType].remark;
		toastInfo.duration = option.duration || baseInfo[tempType].duration;
		isShow.value = true
		timer.value && clearTimeout(timer.value)
		timer.value = setTimeout(() => {
			hideToast()
		}, toastInfo.duration)
	}
	const hideToast = () => {
		isShow.value = false
		timer.value && clearTimeout(timer.value)
	}
	defineExpose({
		showToast,
		hideToast
	})
</script>

<style lang="scss" scoped>
	.custom-toast{
		
		.content{
			position: relative;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			
			.bg-box{
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				z-index: -1;
			}
			
			.icon{
				margin-left: -10rpx;
				width: 210rpx;
				height: 144rpx;
			}
			
			.title{
				margin-top: 8rpx;
				font-family: Source Han Sans;
				font-size: 50rpx;
				font-weight: 500;
				font-feature-settings: "kern" on;
				color: $uni-text-color;
			}
			
			.remark{
				margin-top: 16rpx;
				font-family: Source Han Sans;
				font-size: 36rpx;
				font-feature-settings: "kern" on;
				color: $uni-text-color;
			}
		}
	}
</style>