Notify 消息通知

				
<template>
	<zk-theme type="page" showBack navbarTitle="提示消息">
		<zk-notify :show="notifyShow" :message="notifyMessage" :type="notifyType" :duration="notifyDuration"
			:color="notifyColor" :backgroundColor="notifyBackgroundColor" :top="notifyTop" />
		<!-- 基础用法 -->
		<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">
				<view class="btn-wrap">
					<zk-button @click="showBasicNotify" text="基础提示" type="primary" />
				</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="demo-row">
				<view class="btn-wrap">
					<zk-button @click="showSuccessNotify" type="success" text="成功提示" />
				</view>
				<view class="btn-wrap">
					<zk-button @click="showWarningNotify" type="warning" text="警告提示" />
				</view>
				<view class="btn-wrap">
					<zk-button @click="showDangerNotify" type="danger" text="错误提示" />
				</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="demo-row">
				<view class="btn-wrap">
					<zk-button @click="showCustomNotify" type="primary" text="自定义颜色和持续时间" />
				</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="demo-row">

				<view class="btn-wrap">
					<zk-button @click="showCustomTopNotify" type="primary" text="自定义位置" />
				</view>
			</view>
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				notifyShow: false,
				notifyMessage: '',
				notifyType: 'primary',
				notifyDuration: 3000,
				notifyColor: '',
				notifyBackgroundColor: '',
				notifyTop1: 88,
				notifyTop: 0
			}
		},

		methods: {
			showNotify(options) {
				this.notifyShow = true
				this.notifyMessage = options.message
				this.notifyType = options.type || 'primary'
				this.notifyDuration = options.duration || 3000
				this.notifyColor = options.color || ''
				this.notifyBackgroundColor = options.backgroundColor || ''
				this.notifyTop = options.top > 0 ? options.top : this.notifyTop1

			},

			showBasicNotify() {

				this.showNotify({
					message: '这是一条基础提示'
				})
			},

			showSuccessNotify() {
				this.showNotify({
					message: '操作成功',
					type: 'success'
				})
			},

			showWarningNotify() {
				this.showNotify({
					message: '警告信息',
					type: 'warning'
				})
			},

			showDangerNotify() {
				this.showNotify({
					message: '错误信息',
					type: 'danger'
				})
			},

			showCustomNotify() {
				this.showNotify({
					message: '自定义样式的提示',
					color: '#ad0000',
					backgroundColor: '#ffe1e1',
					duration: 5000
				})
			},



			showCustomTopNotify() {
				this.showNotify({
					message: '自定义位置的提示',
					type: 'success',
					top: 500
				})
			}
		}
	}
</script>

<style>
	.demo-row {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
	}

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

	/* #ifdef APP-NVUE */
	.demo-row {
		flex-direction: row;
		flex-wrap: wrap;
	}

	/* #endif */
</style>