Ci2Order.vue/App/components/z-message/z-message.vue

<template>
	<view class="message-content flex-n fjc"  :class="show?'animate_show':'animate_hide'">
		<view class="text" :class="type">{{text}}</view>
	</view>
</template>

<script>
	export default {
		name: 'z-message',
		props: {
			// type: {
			// 	type: String,
			// 	default: ''
			// },
			// text: {
			// 	type: String | Object,
			// 	default: ''
			// },
			// show: {
			// 	type: Boolean,
			// 	default: false
			// }

		},
		data() {
			return {
				show:false,
				type:'',
				text:''
			}
		},
		methods:{
			success(text){
				this.show=true;
				this.type='success';
				this.text=text;
				setTimeout(() => {this.show=false},2000) //显示后2秒就消失
			},
			error(text){
				this.show=true;
				this.type='error';
				this.text=text;
				setTimeout(() => {this.show=false},2000) //显示后2秒就消失
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes hide{
		0%{
			top: 110rpx;
			opacity: 1;
		}
		50%{
			top:10rpx;
			opacity: 0;
		}
		100%{
			top:-90rpx;
			opacity: 0;
		}
	}
	@keyframes show{
		0%{
			top:-90rpx;
			opacity: 0;
		}
		50%{
			top:10rpx;
			opacity: 0;
		}
		100%{
			top: 110rpx;
			opacity: 1;
		}
	}
	.animate_hide{
		animation: hide 1s;
		animation-fill-mode: forwards;
	}
	.animate_show{
		animation: show .5s;
		animation-fill-mode: forwards;
	}
	.message-content {
		position: fixed;
		top: 110rpx;
		width: 100%;
		left: 0;
		z-index: 1600;
height: fit-content;
		.text {
			width: fit-content;
			max-width: 550rpx;
			text-align: center;
			font-size: 34rpx;
			padding: 20rpx 40rpx;
		}

		.success {
			background-color: #f0f9eb;
			border-color: #e1f3d8;
			color: #67C23A;
		}

		.error {
			background-color: #fef0f0;
			border-color: #fde2e2;
			color: #F56C6C;
		}

		.info {
			background-color: #f9fafc;
			border: 1px solid #eaeefb;
			color: #5e6d82;
		}
	}
</style>