xcx_zhengbasai_reset/components/global/toast.vue

<template>
	<view
		v-if="show"
		class="container toast"
		:style="{'background-color': isMask ? 'rgba(0,0,0,.6)' : ''}"
	>
		<slot />
		<view v-if="isClose" class="toast_close" @click="show = false" />
	</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 {
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		justify-content: center;
		&_close{
			display: block;
			width: 62rpx;
			height: 62rpx;
			margin: 32rpx auto;
			background: url(../../static/toast_close.png) no-repeat center;
			background-size: 100%;
		}
	}
</style>