weapp-v1/components/custom-toast.vue

<template>
	<view class="custom-toast" :class="[show ? 'show' : 'hide', position ? position : '']">
		{{ message }}
	</view>
</template>

<script>
	//弹出消息提示组件，咋外部通过 $refs 获取组件实例，然后调用 hover 方法传入 提示信息即可使用
	export default {
		data() {
			return {
				show: false,
				message: '',
				position: ''
			}
		},
		methods: {
			hover (message, duration = 2345, position) {
				if (position) {
					this.position = position
				}
				clearTimeout(this.timer)
				this.show = true
				this.message = message
				this.timer = setTimeout(() => {
					this.show = false
					this.message = ''
				}, duration)
			},
			hide() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes show-custom-toast {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	.custom-toast {
		position: fixed;
		line-height: 48rpx;
		font-size: 30rpx;
		max-width: 60vw;
		background: rgba(0, 0, 0, .6);
		padding: 12rpx 24rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 666;
		text-align: center;
		color: #FFFFFF;
		border-radius: 8rpx;
	}
	.show {
		animation: show-custom-toast .6s;
		animation-fill-mode: forwards;
	}
	.hide {
		display: none;
	}
	.top {
		top: 20%;
	}
	.center {
		top: 48%;
	}
	.bottom {
		top: 80%;
	}
</style>