MeetMateApp/components/ToastW3/ToastW3.vue

<template>
	<view class="page-total" v-if="isShow">
		<view class="box" :class="AClass[AnIndex][AnIdx]">
			<view class="dialog-box">
				<view class="title">{{options.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				AClass: [
					['a-fadein', 'a-fadeout'],
					['a-bouncein', 'a-bounceout'],
				],
				AnIndex: 0,
				AnIdx: 0,
				isShow: false,
				SetTime: null,
				value: '',
				promise: '',
				// 配置
				options: {
					// 提示标题
					title: '',
					// 动画类型
					animation: 0,
				},
			};
		},
		props: {
			// 提示标题
			title: {
				type: String,
				default: '提示',
			},
			// 动画类型
			animation: {
				type: Number,
				default: 0
			}
		},
		methods: {
			// 询问框
			showToast(options) {
				this.AnIndex = options.animation || 0;
				this.AnIdx = options.animation || 0;
				this.options = {
					// 提示标题
					title: options.title || '',
					// 动画类型
					animation: options.animation || 0,
				};
				this.show();
				let that = this;
				setTimeout(function() {
						that.hide();
					},
					2000);
				this.promise = new Promise((resolve, reject) => {
					this.resolve = resolve;
					this.reject = reject;
				});
				return this.promise; //返回promise对象,给父级组件调用
			},
			/**
			 * 显示
			 */
			show(callback) {
				this.isShow = true;
			},
			/**
			 * 隐藏
			 */
			hide() {
				this.AnIdx = 1;
				this.SetTime = setTimeout(() => {
					this.isShow = false;
				}, 300);
			},
			/**
			 * 清除输入值
			 */
			onClear() {
				this.options.value = '';
			},
			/**
			 * 取消点击
			 */
			onCancel() {
				this.hide();
			},
			/**
			 * 确定点击
			 */
			onConfirm() {
				this.hide();
			},
		},
	}
</script>

<style scoped lang="scss">
	@import 'ToastW3.scss'
</style>