Loading Page 加载页

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="旋转动画页面">
		<!-- 基础用法 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" />
			<view class="demo-row">
				<zk-button type="primary" shape="round" text="显示加载页" @click="show1 = true"> </zk-button>
			</view>
			<zk-loading-page :show="show1" @click="show1 = false" />
		</zk-theme>

		<!-- 自定义图标 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义图标" />
			<view class="demo-row">
				<zk-button v-for="item in iconTypes" style="margin: 20rpx;" :key="item" :text="item" type="primary"
					shape="round" margin="0 20rpx 20rpx 0" @click="showIconLoading(item)"> </zk-button>
			</view>
			<zk-loading-page :show="show2" :icon-type="currentIconType" :icon-color="iconColor"
				@click="show2 = false" />
		</zk-theme>

		<!-- 自定义文案 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义文案" />
			<view class="demo-row">
				<zk-button type="primary" shape="round" @click="show3 = true" text="显示加载页"> </zk-button>
			</view>
			<zk-loading-page :show="show3" loading-text="正在加载精彩内容..." text-color="#1989fa" :text-size="32"
				@click="show3 = false" />
		</zk-theme>

		<!-- 自定义图片 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义图片" />
			<view class="demo-row">
				<zk-button type="primary" shape="round" @click="show4 = true" text="显示加载页"></zk-button>
			</view>
			<zk-loading-page :show="show4" type="image" loading-img="/static/logo.png" :img-width="80" :img-height="80"
				@click="show4 = false" />
		</zk-theme>

		<!-- 自定义背景色 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义背景色" />
			<view class="demo-row">
				<zk-button type="primary" shape="round" @click="show5 = true" text="显示加载页"></zk-button>
			</view>
			<zk-loading-page :show="show5" background="rgba(0, 0, 0, 0.8)" icon-color="#fff" text-color="#fff"
				@click="show5 = false" />
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				iconTypes: ['circle', 'spinner', 'dot'],
				currentIconType: 'circle',
				iconColor: '#1989fa'
			}
		},

		methods: {
			showIconLoading(type) {
				this.currentIconType = type
				this.show2 = true

				setTimeout(() => {
					this.show2 = false
				}, 3000)
			}
		},

		watch: {
			show1(val) {
				if (val) {
					setTimeout(() => {
						this.show1 = false
					}, 3000)
				}
			},
			show3(val) {
				if (val) {
					setTimeout(() => {
						this.show3 = false
					}, 3000)
				}
			},
			show4(val) {
				if (val) {
					setTimeout(() => {
						this.show4 = false
					}, 3000)
				}
			},
			show5(val) {
				if (val) {
					setTimeout(() => {
						this.show5 = false
					}, 3000)
				}
			}
		}
	}
</script>

<style lang="scss">
	.demo-row {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
</style>