组件代码

<template>
	<view>
		<view v-if="isShow" class="popupView" @click="popHide(false)">
			<view class="content" @click.stop="conClick">
				<div v-if="type=='success'">
					<div class="toastInfo1" v-if="active">
						<image class="icon"
							src="/static/pop/icon_success_active.png">
						</image>
						<text>{{content}}</text>
					</div>
					<div class="toastInfo success" v-else>
						<image class="icon"
							src="/static/pop/icon_success.png">
						</image>
						<text>{{content}}</text>
					</div>
				</div>
				<div v-if="type=='warn'">
					<div class="toastInfo1" v-if="active">
						<image class="icon"
							src="/static/pop/icon_warn_active.png">
						</image>
						<text>{{content}}</text>
					</div>
					<div class="toastInfo warn" v-else>
						<image class="icon"
							src="/static/pop/icon_warn.png">
						</image>
						<text>{{content}}</text>
					</div>
				</div>
				<div v-if="type=='error'">
					<div class="toastInfo1" v-if="active">
						<image class="icon"
							src="/static/pop/icon_fail_active.png">
						</image>
						<text>{{content}}</text>
					</div>
					<div class="toastInfo fail" v-else>
						<image class="icon"
							src="/static/pop/icon_warn.png">
						</image>
						<text>{{content}}</text>
					</div>
				</div>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'showToast',
		props: {
			isShow1: {
				type: Boolean,
				default: false,
			},
			debug1: {
				type: Boolean,
				default: false,
			},
			content1: {
				type: String,
				default: '确定要删除吗?',
			}
		},
		data() {
			return {
				debug: this.debug1,
				isShow: false,
				content: this.content1,
				type: '',
				active: true,
			};
		},
		watch: {
			isShow1(value) {
				this.isShow = value;
			},
			debug1(value) {
				this.debug = value
			},
			content1(value) {
				this.content = value
			},
		},
		methods: {
			/*隐藏*/
			popHide(request) {
				this.isShow = false;
				this.$emit('hidePop', request);
			},
			/*防止事件往下传递*/
			conClick() {

			},
			/*成功*/
			success(message) {
				this.isShow = true;
				this.content = message;
				this.type = 'success';
				this.vanish();
			},
			/*失败*/
			error(message) {
				this.isShow = true;
				this.content = message;
				this.type = 'error';
				this.vanish();
			},
			/*警告*/
			warn(message) {
				this.isShow = true;
				this.content = message;
				this.type = 'warn';
				this.vanish();
			},
			/*提示*/
			info(message) {
				this.isShow = true;
				this.content = message;
				this.type = 'info';
				this.vanish();
			},
			/*消失*/
			vanish() {
				setTimeout(() => {
					this.isShow = false;
					this.content = '';
				}, 2000);
			}
		}
	}
</script>

<style lang="scss">
	/* 动画代码 */
	@keyframes example {
		0% {
			transform: scale(1.2, 1.2)
		}

		100% {
			transform: scale(1.0, 1.0)
		}
	}

	.popupView {
		position: fixed;
		z-index: 999;

		background-color: rgba($color: #000000, $alpha: 0.2);

		// max-width: 800px!important;//设置页面最大宽度
		width: 100%;
		/* width: 100%;
		height: 100vh; */
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popupView .content {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		animation-name: example; //动画代码块
		animation-duration: 0.3s; //持续时间
		animation-fill-mode: forwards; //定格到最后一帧
	}

	.toastInfo {
		width: 694rpx;
		height: 96rpx;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0px 2rpx 80rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		backdrop-filter: blur(10rpx);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;

		image {
			width: 44rpx;
			height: 44rpx;
			margin-left: 26rpx;
			margin-right: 12rpx;
		}

		text {
			padding: 0 !important;
			margin-top: 0;
			width: calc(100% - 82rpx);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.toastInfo1 {
		width: 694rpx;
		height: 96rpx;
		background: #EDEEF3;
		box-shadow: 0px 2rpx 80rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		backdrop-filter: blur(10rpx);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;

		image {
			width: 44rpx;
			height: 44rpx;
			margin-left: 26rpx;
			margin-right: 12rpx;
		}

		text {
			padding: 0 !important;
			margin-top: 0;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #151751;
			width: calc(100% - 82rpx);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.toastInfo.success {
		background: #29C060;
	}

	.toastInfo.warn {
		background: #FFC200;
	}

	.toastInfo.fail {
		background: #FA5150;
	}
</style>

使用代码

<template>
    <view class="content">
        <text class="success" @click="success">成功</text>
        <text class="error" @click="error">失败</text>
        <text class="warn" @click="warn">警告</text>
        <showToast ref="showToast"></showToast>
    </view>
</template>

<script>
    import showToast from '@/components/showToast/showToast.vue'
    export default {
        components: {
            showToast
          },
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
            success(){
                this.$refs['showToast'].success('成功');
            },
            error(){
                this.$refs['showToast'].error('失败');
            },
            warn(){
                this.$refs['showToast'].warn('警告');
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    text {
        font-size: 36rpx;
        margin-top: 20upx;
        font-size: 30upx;
        color: #fff;
        padding: 15upx 20upx;
    }
    .content .success{
        background-color: #1afa29;
    }
    .content .error{
        background-color: #d81e06;
    }
    .content .warn{
        background-color: #f4ea2a;
    }

</style>

改自插件

插件由提示信息pop插件修改而成。

gitee代码

gitee代码