weapp-v1/components/toast.vue

<template>
	<view v-if="show" class="toast_body" :style="{'background-color': isMask ? 'rgba(0,0,0,.6)' : ''}">
		<slot></slot>
		<image v-if="isClose" class="close" src="../static/icon/close.png" @click="show = false"></image>
	</view>
</template>

<script>
	export default {
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			isMask: {
				type: Boolean,
				default: true
			},
			isClose: {
				type: Boolean,
				 default: true
			},
			beforeClose: {
				type: Function,
				default: null
			}
		},
		watch: {
			isShow(a,b) {
				this.show = a
			},
			show(a, b) {
				if(!a) {
					if(this.beforeClose) {
						this.beforeClose.bind(this.$parent)()
					}
				}
			}
		},
		data() {
			return {
				show: this.isShow
			}
		}
	}
</script>

<style scoped lang="scss">
	.toast_body {
		position: fixed;
		z-index: 999999;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		.close{
			display: block;
			width: 62rpx;
			height: 62rpx;
			margin: 32rpx auto;
		}
	}
</style>