Modal 模态框

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="提示弹窗modal">
		<!-- 基础模态框 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础模态框" />
			<zk-button @click="showBasicModal = true" type="primary" text="基础模态框" />
			<zk-modal :show="showBasicModal" @close="showBasicModal = false" title="基础模态框" content="这是一个基础的模态框示例"
				@confirm="handleBasicConfirm" @cancel="handleBasicCancel" />
		</zk-theme>

		<!-- 自定义内容模态框 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义内容模态框" />
			<zk-button @click="showCustomModal = true" type="success" text="自定义内容模态框" />
			<zk-modal :show="showCustomModal" @close="showCustomModal = false" title="自定义内容"
				@confirm="handleCustomConfirm" @cancel="handleCustomCancel">
				<view class="custom-content">
					<zk-text type="secondary" :size="28" margin="0 0 20rpx 0" text="这是自定义的内容区域" />
					<zk-input v-model="customInput" placeholder="请输入内容" :width="500" :height="80" />
				</view>
			</zk-modal>
		</zk-theme>

		<!-- 无标题模态框 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="无标题模态框" />
			<zk-button @click="showNoTitleModal = true" type="info" text="无标题模态框" />
			<zk-modal :show="showNoTitleModal" @close="showNoTitleModal = false" content="这是一个没有标题的模态框"
				@confirm="handleNoTitleConfirm" @cancel="handleNoTitleCancel" />
		</zk-theme>

		<!-- 单按钮模态框 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="单按钮模态框" />
			<zk-button @click="showSingleButtonModal = true" type="danger" text="单按钮模态框" />
			<zk-modal :show="showSingleButtonModal" @close="showSingleButtonModal = false" title="单按钮模态框"
				content="这个模态框只有一个确认按钮" :show-cancel-button="false" confirm-button-text="知道了"
				@confirm="handleSingleButtonConfirm" />
		</zk-theme>

		<!-- 自定义圆角模态框 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义圆角模态框" />
			<zk-button @click="showCustomRoundModal = true" type="primary" text="自定义圆角模态框" />
			<zk-modal :show="showCustomRoundModal" @close="showCustomRoundModal = false" title="自定义圆角"
				content="这个模态框使用了自定义的圆角大小" :round="true" round-size="32rpx" @confirm="handleCustomRoundConfirm"
				@cancel="handleCustomRoundCancel" />
		</zk-theme>

		<!-- 无圆角模态框 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="无圆角模态框" />
			<zk-button @click="showNoRoundModal = true" type="warning" text="无圆角模态框" />
			<zk-modal :show="showNoRoundModal" @close="showNoRoundModal = false" title="无圆角" content="这个模态框没有圆角"
				:round="false" @confirm="handleNoRoundConfirm" @cancel="handleNoRoundCancel" />
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				showBasicModal: false,
				showCustomModal: false,
				showNoTitleModal: false,
				showSingleButtonModal: false,
				showCustomRoundModal: false,
				showNoRoundModal: false,
				customInput: ''
			}
		},
		methods: {
			handleBasicConfirm() {
				console.log('基础模态框：确认')
				this.showBasicModal = false
			},
			handleBasicCancel() {
				console.log('基础模态框：取消')
				this.showBasicModal = false
			},
			handleCustomConfirm() {
				console.log('自定义内容模态框：确认', this.customInput)
				this.showCustomModal = false
			},
			handleCustomCancel() {
				console.log('自定义内容模态框：取消')
				this.showCustomModal = false
			},
			handleNoTitleConfirm() {
				console.log('无标题模态框：确认')
				this.showNoTitleModal = false
			},
			handleNoTitleCancel() {
				console.log('无标题模态框：取消')
				this.showNoTitleModal = false
			},
			handleSingleButtonConfirm() {
				console.log('单按钮模态框：确认')
				this.showSingleButtonModal = false
			},
			handleCustomRoundConfirm() {
				console.log('自定义圆角模态框：确认')
				this.showCustomRoundModal = false
			},
			handleCustomRoundCancel() {
				console.log('自定义圆角模态框：取消')
				this.showCustomRoundModal = false
			},
			handleNoRoundConfirm() {
				console.log('无圆角模态框：确认')
				this.showNoRoundModal = false
			},
			handleNoRoundCancel() {
				console.log('无圆角模态框：取消')
				this.showNoRoundModal = false
			}
		}
	}
</script>