Toast 轻提示

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="消息弹窗">
		<zk-toast ref="toast" />

		<!-- 加载提示 -->
		<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="btn-wrap">
				<zk-button text="显示加载提示（带蒙层）" type="success"@click="showLoadingToast" />
			</view>
		</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="button-group">
				<view class="btn-wrap">
					<zk-button text="顶部提示（无蒙层）" type="success" @click="showTopToast" />
				</view>
				<view class="btn-wrap">
					<zk-button text="中间提示（无蒙层）" type="success" @click="showMiddleToast" />
				</view>
				<view class="btn-wrap">
					<zk-button text="底部提示（无蒙层）" type="success" @click="showBottomToast" />
				</view>
			</view>
		</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="button-group">
				<view class="btn-wrap">
					<zk-button text="成功提示" type="success" @click="showSuccessToast" />
				</view>
				<view class="btn-wrap">
					<zk-button text="错误提示" type="danger" @click="showErrorToast" />
				</view>
			</view>
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		methods: {
			showLoadingToast() {
				this.$refs.toast.show({
					message: '正在加载...',
					position: 'middle',
					duration: 5000,
					mask: true
				})
			},

			showTopToast() {
				this.$refs.toast.show({
					message: '顶部提示',
					position: 'top'
				})
			},

			showMiddleToast() {
				this.$refs.toast.show({
					message: '中间提示'
				})
			},

			showBottomToast() {
				this.$refs.toast.show({
					message: '底部提示',
					position: 'bottom'
				})
			},

			showSuccessToast() {
				this.$refs.toast.success('操作成功')
			},

			showErrorToast() {
				this.$refs.toast.error('操作失败')
			}
		}
	}
</script>

<style>
	/* #ifndef APP-NVUE */
	.button-group {
		display: flex;
		flex-direction: column;
	}

	/* #endif */

	/* #ifdef APP-NVUE */
	.button-group {
		flex-direction: column;
	}

	/* #endif */

	.btn-wrap {
		margin-bottom: 30rpx;
	}

	 
	.button-group .btn-wrap:last-child {
		margin-bottom: 0;
	}
</style>