NoNetwork 断网提示

				
<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="基础用法" />
			<zk-button :text="isNetwork1 ? '切换到无网络' : '切换到有网络'" type="primary" :size="28" margin="20rpx 0"
				@click="toggleNetwork(1)" />
			<zk-no-network :show="!isNetwork1" @reload="onReload" @connected="onConnected" />
		</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="自定义提示" />
			<zk-button :text="isNetwork2 ? '切换到无网络' : '切换到有网络'" type="primary" :size="28" margin="20rpx 0"
				@click="toggleNetwork(2)" />
			<zk-no-network :show="!isNetwork2" tips="哎呀，网络出问题啦～" reload-text="点击重试" icon-color="#ff0000"
				:icon-size="100" />
		</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="隐藏重试按钮" />
			<zk-button :text="isNetwork3 ? '切换到无网络' : '切换到有网络'" type="primary" :size="28" margin="20rpx 0"
				@click="toggleNetwork(3)" />
			<zk-no-network :show="!isNetwork3" :show-reload="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="自定义按钮样式" />
			<zk-button :text="isNetwork4 ? '切换到无网络' : '切换到有网络'" type="primary" :size="28" margin="20rpx 0"
				@click="toggleNetwork(4)" />

		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				isNetwork1: true,
				isNetwork2: true,
				isNetwork3: true,
				isNetwork4: true
			}
		},
		methods: {
			// 切换网络状态
			toggleNetwork(index) {
				this[`isNetwork${index}`] = !this[`isNetwork${index}`]
			},
			// 重新加载
			onReload() {
				uni.showToast({
					title: '点击了重新加载',
					icon: 'none'
				})
			},
			// 网络已连接
			onConnected() {
				uni.showToast({
					title: '网络已连接',
					icon: 'none'
				})
			}
		}
	}
</script>

<style>

</style>