feat(demo): 新增 NovaDialog 组件演示页面
- 创建弹框组件功能演示页面 - 展示 NovaDialog 组件的各种使用场景 - 提供基础弹框、表单弹框、确认弹框等示例 - 演示自定义标题、按钮文字、宽高等配置 - 为开发者提供组件使用参考和最佳实践
This commit is contained in:
Leo
parent
a83a32b969
commit
7c503b096e
221
src/views/demo/dialog/index.vue
Normal file
221
src/views/demo/dialog/index.vue
Normal file
@ -0,0 +1,221 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import NovaDialog from '@/components/common/NovaDialog.vue'
|
||||
import { coiMsgInfo, coiMsgSuccess } from '@/utils/coi'
|
||||
|
||||
// 弹框引用
|
||||
const basicDialogRef = ref()
|
||||
const customDialogRef = ref()
|
||||
const fullscreenDialogRef = ref()
|
||||
const noFooterDialogRef = ref()
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
email: '',
|
||||
description: '',
|
||||
})
|
||||
|
||||
// 基础弹框
|
||||
function openBasicDialog() {
|
||||
basicDialogRef.value?.novaOpen()
|
||||
}
|
||||
|
||||
function handleBasicConfirm() {
|
||||
coiMsgSuccess('基础弹框确认操作')
|
||||
basicDialogRef.value?.novaClose()
|
||||
}
|
||||
|
||||
function handleBasicCancel() {
|
||||
coiMsgInfo('基础弹框取消操作')
|
||||
basicDialogRef.value?.novaClose()
|
||||
}
|
||||
|
||||
// 自定义内容弹框
|
||||
function openCustomDialog() {
|
||||
// 重置表单数据
|
||||
Object.assign(formData, {
|
||||
name: '',
|
||||
email: '',
|
||||
description: '',
|
||||
})
|
||||
customDialogRef.value?.novaOpen()
|
||||
}
|
||||
|
||||
function handleCustomConfirm() {
|
||||
if (!formData.name) {
|
||||
coiMsgInfo('请输入姓名')
|
||||
return
|
||||
}
|
||||
coiMsgSuccess(`表单提交成功！姓名：${formData.name}`)
|
||||
customDialogRef.value?.novaClose()
|
||||
}
|
||||
|
||||
function handleCustomCancel() {
|
||||
customDialogRef.value?.novaClose()
|
||||
}
|
||||
|
||||
// 全屏弹框
|
||||
function openFullscreenDialog() {
|
||||
fullscreenDialogRef.value?.novaOpen()
|
||||
}
|
||||
|
||||
function handleFullscreenConfirm() {
|
||||
coiMsgSuccess('全屏弹框确认操作')
|
||||
fullscreenDialogRef.value?.novaClose()
|
||||
}
|
||||
|
||||
function handleFullscreenCancel() {
|
||||
fullscreenDialogRef.value?.novaClose()
|
||||
}
|
||||
|
||||
// 无底部按钮弹框
|
||||
function openNoFooterDialog() {
|
||||
noFooterDialogRef.value?.novaOpen()
|
||||
}
|
||||
|
||||
function handleNoFooterClose() {
|
||||
coiMsgInfo('无底部按钮弹框关闭')
|
||||
}
|
||||
|
||||
function closeNoFooterDialog() {
|
||||
noFooterDialogRef.value?.novaClose()
|
||||
}
|
||||
|
||||
function handleCustomAction() {
|
||||
coiMsgSuccess('执行自定义操作')
|
||||
noFooterDialogRef.value?.novaClose()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-6">
|
||||
<n-card title="NovaDialog 弹框组件示例">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<n-button type="primary" @click="openBasicDialog">
|
||||
基础弹框
|
||||
</n-button>
|
||||
<n-button type="info" @click="openCustomDialog">
|
||||
自定义内容弹框
|
||||
</n-button>
|
||||
<n-button type="warning" @click="openFullscreenDialog">
|
||||
全屏弹框
|
||||
</n-button>
|
||||
<n-button type="success" @click="openNoFooterDialog">
|
||||
无底部按钮弹框
|
||||
</n-button>
|
||||
</div>
|
||||
</n-card>
|
||||
|
||||
<!-- 基础弹框 -->
|
||||
<NovaDialog
|
||||
ref="basicDialogRef"
|
||||
title="基础弹框"
|
||||
:width="500"
|
||||
:height="300"
|
||||
@nova-confirm="handleBasicConfirm"
|
||||
@nova-cancel="handleBasicCancel"
|
||||
>
|
||||
<template #content>
|
||||
<div class="p-4">
|
||||
<p class="text-base">
|
||||
这是一个基础的弹框示例。
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 mt-2">
|
||||
点击确定或取消按钮来关闭弹框。
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</NovaDialog>
|
||||
|
||||
<!-- 自定义内容弹框 -->
|
||||
<NovaDialog
|
||||
ref="customDialogRef"
|
||||
title="自定义表单弹框"
|
||||
:width="600"
|
||||
:height="400"
|
||||
@nova-confirm="handleCustomConfirm"
|
||||
@nova-cancel="handleCustomCancel"
|
||||
>
|
||||
<template #content>
|
||||
<div class="p-4">
|
||||
<n-form :model="formData" label-placement="left" label-width="80px">
|
||||
<n-form-item label="姓名">
|
||||
<n-input v-model:value="formData.name" placeholder="请输入姓名" />
|
||||
</n-form-item>
|
||||
<n-form-item label="邮箱">
|
||||
<n-input v-model:value="formData.email" placeholder="请输入邮箱" />
|
||||
</n-form-item>
|
||||
<n-form-item label="描述">
|
||||
<n-input
|
||||
v-model:value="formData.description"
|
||||
type="textarea"
|
||||
placeholder="请输入描述"
|
||||
:rows="4"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</div>
|
||||
</template>
|
||||
</NovaDialog>
|
||||
|
||||
<!-- 全屏弹框 -->
|
||||
<NovaDialog
|
||||
ref="fullscreenDialogRef"
|
||||
title="全屏弹框"
|
||||
:fullscreen="true"
|
||||
@nova-confirm="handleFullscreenConfirm"
|
||||
@nova-cancel="handleFullscreenCancel"
|
||||
>
|
||||
<template #content>
|
||||
<div class="p-6">
|
||||
<h3 class="text-lg font-semibold mb-4">
|
||||
全屏弹框内容
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<n-card title="卡片1">
|
||||
<p>这是全屏弹框中的内容区域。</p>
|
||||
<p>可以放置任何复杂的内容和组件。</p>
|
||||
</n-card>
|
||||
<n-card title="卡片2">
|
||||
<p>全屏模式下可以展示更多信息。</p>
|
||||
<p>适用于复杂的表单或详细信息展示。</p>
|
||||
</n-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</NovaDialog>
|
||||
|
||||
<!-- 无底部按钮弹框 -->
|
||||
<NovaDialog
|
||||
ref="noFooterDialogRef"
|
||||
title="无底部按钮弹框"
|
||||
:width="500"
|
||||
:height="300"
|
||||
:footer-hidden="true"
|
||||
@nova-close="handleNoFooterClose"
|
||||
>
|
||||
<template #content>
|
||||
<div class="p-4">
|
||||
<p class="text-base mb-4">
|
||||
这是一个没有底部按钮的弹框。
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 mb-4">
|
||||
需要自定义关闭逻辑。
|
||||
</p>
|
||||
<div class="flex justify-end gap-2">
|
||||
<n-button type="default" @click="closeNoFooterDialog">
|
||||
自定义关闭
|
||||
</n-button>
|
||||
<n-button type="primary" @click="handleCustomAction">
|
||||
自定义操作
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</NovaDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user