Popup 弹出层

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle=" popup 弹出层 ">
		<!-- 基础用法 -->
		<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 text="展示弹出层" type="primary" @click="showBasic = true" />
			</view>
			<zk-popup :show="showBasic" @close="showBasic = false">
				<view class="popup-content">
					<zk-text class="popup-text" text="基础弹出层" />
				</view>
			</zk-popup>
		</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" v-for="item in positions" :key="item">
					<zk-button :text="`${item}方向弹出`" size="small" type="success" @click="showPosition(item)" />
				</view>
			</view>
			<zk-popup :show="show" :position="position" @close="show = false">
				<view class="popup-content">
					<zk-text class="popup-text" :text="`${position}弹出层`" />
				</view>
			</zk-popup>
		</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 text="展示关闭图标" type="success" @click="showClose = true" />
			</view>
			<zk-popup :show="showClose" closeable position="bottom" @close="showClose = false">
				<view class="popup-content">
					<zk-text class="popup-text" text="展示关闭图标" />
				</view>
			</zk-popup>
		</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 text="展示圆角弹窗" type="warning" @click="showRound = true" />
			</view>
			<zk-popup :show="showRound" round position="bottom" @close="showRound = false">
				<view class="popup-content">
					<zk-text class="popup-text" text="圆角弹窗" />
				</view>
			</zk-popup>
		</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 text="无动画弹出" type="danger" @click="showNoTransition = true" />
			</view>
			<zk-popup :show="showNoTransition" :transition="false" @close="showNoTransition = false">
				<view class="popup-content">
					<zk-text class="popup-text" text="无动画弹出层" />
				</view>
			</zk-popup>
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				showBasic: false,
				show: false,
				position: 'center',
				positions: ['top', 'bottom', 'left', 'right'],
				showClose: false,
				showRound: false,
				showNoTransition: false
			}
		},

		methods: {
			showPosition(position) {
				this.position = position
				this.show = true
			}
		}
	}
</script>

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

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

	.popup-content {
		padding: 30rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 200rpx;
		width: 200rpx;
	}

	.popup-text {
		font-size: 28rpx;
		text-align: center;
	}

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

	/* #endif */
</style>