fanxing-wap/components/mask-tips/mask-tips.vue

<template>
	<!-- 蒙层操作提示 -->
	<view class="mask-tips-container" v-if="show">
		<view class="content-box" :style="{top: top}">
			<image class="tip-img" src="@/static/imgs/fighter.gif"></image>
			<view class="tips-text">{{text}}</view>
			<u-button color="#fff" @click="show = false"
				:customStyle="{background: 'transparent', fontSize: '32rpx', height: '56rpx', borderRadius: '16rpx', width: '180rpx'}">我知道了</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			top: { // 文案内容到顶部位置
				type: String,
				default: '158rpx'
			},
			text: { // 文案内容
				type: String,
				default: '左滑删除商品'
			},
			tipId: { // 缓存id 必传
				type: String
			}
		},
		data() {
			return {
				show: false
			}
		},
		mounted() {
			if (!this.tipId) {
				return
			}
			const tipId = this.$getSS(`maskTip_${this.tipId}`)
			if (tipId) {
				this.show = false
			} else {
				this.show = true
				this.$setSS(`maskTip_${this.tipId}`, true)
			}
		}
	}
</script>

<style scoped lang="scss">
	.mask-tips-container {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0, 0, 0, .35);
		z-index: 9999;

		.content-box {
			position: absolute;
			right: 0;
			top: 0;
			z-index: 10;
			text-align: center;
			width: 300rpx;

			.tips-text {
				font-size: 32rpx;
				color: #fff;
				font-weight: bold;
				margin: 14rpx 0;
			}

			.tip-img {
				width: 210rpx;
				height: 200rpx;
				margin: 0 auto;
			}
		}

	}
</style>