封装通用loading组件

our-loading组件

<tempalte>
	<transition name="fade">
		<view class="mask"
			v-show="isActive"
			:class="{ "full-screen": isFullScreen }"
			:style="{ backgroundColor }"
		>
			<view class="spinner"
				:style="{ transform: `translate(-50%, -${translateY}%)`}"
			>
				<slot>
					<loop :color="color" :size="size" />
				<slot>
				<view v-if="text.length" :style="{color: textColor}">
					{
   {
    text }}
				</view>
			</view>
		</view>
	</transition>
</template>

<script>
	import loop from './loaders/loop.vue';
	export default {
   
		name: 'ourLoading',
		components: {
   
			loop
		},
		props: {
   
			active: Boolean,
			// Y轴方向
			translateY: {
   
				type: Number,
				default: 150
			},
			// 文字内容
			text: {
   
				type: String,
				default: ''
			},
			// 元素颜色
			color: {
   
				type: String,
				default: 'orange'
			},
			// 文字颜色
			textColor: {
   
				type: String,
				default: '#333'
			},
			// 是否全屏
			isFullScreen: {
   
				type: Boolean,
				default: false
			},
			// 背景颜色
			backgroundColor: {
   
				type: String,
				default: 'rgba(255, 255, 255, .9)'
			},
			// 元素大小
			size: {
   
				type: Number,
				default: 40
			}
		},
		data () {
   
			return (
				isActive: this.active || false
			)
		},
		watch: {