<template>
	<view class="mask" :class="mask == 'true' || mask == true ? 'mask-show' : ''" @click="Mclose" v-if="show" @touchmove.stop.prevent="preventTouchMove">
		<view class="preloader"><view class="loader"></view></view>
	</view>
	<!-- 遮罩层-->
</template>

<script scoped="true">
export default {
	name: 'w-loading',
	props: {
		text: String,
		mask: Boolean | String,
		click: Boolean | String
	},
	data() {
		return {
			show: false
		};
	},
	methods: {
		preventTouchMove() {
			console.log('stop user scroll it!');
			return;
		},
		Mclose() {
			if (this.click == 'false' || this.click == false) {
				this.show = false;
			}
		},
		open() {
			this.show = true;
		},
		close() {
			this.show = false;
		}
	}
};
</script>

<style>
.mask {
	/* pointer-events: none; */
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.mask.mask-show {
	background: rgba(7, 17, 27, 0.3);
}
.title {
	color: #fff;
	font-size: 28rpx;
}

/* loading加载动画的css */
.loader {
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	width: 150rpx;
	height: 150rpx;
	margin: -75rpx 0 0 -75rpx;
	border-radius: 50%;
	border: 3rpx solid transparent;
	border-top-color: #166ce5;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}
.loader::before {
	content: '';
	position: absolute;
	top: 5rpx;
	left: 5rpx;
	right: 5rpx;
	bottom: 5rpx;
	border-radius: 50%;
	border: 3rpx solid transparent;
	border-top-color: #aa0000;
	-webkit-animation: spin 3s linear infinite;
	animation: spin 3s linear infinite;
}
.loader::after {
	content: '';
	position: absolute;
	top: 15rpx;
	left: 15rpx;
	right: 15rpx;
	bottom: 15rpx;
	border-radius: 50%;
	border: 3rpx solid transparent;
	border-top-color: #005500;
	-webkit-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
</style>
