feat(components): 新增 NovaDialog 通用弹框组件
- 基于 n-modal 封装的统一弹框组件 - 支持自定义宽度、高度、标题和按钮文字 - 提供 novaOpen/novaClose 方法控制显示状态 - 支持 #header 和 #content 插槽自定义内容 - 统一项目弹框交互体验和视觉风格
This commit is contained in:
Leo
parent
b8d6e5d781
commit
02778d7c4f
223
src/components/common/NovaDialog.vue
Normal file
223
src/components/common/NovaDialog.vue
Normal file
@ -0,0 +1,223 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, toRefs } from 'vue'
|
||||||
|
import { NButton, NSpace } from 'naive-ui'
|
||||||
|
|
||||||
|
// 定义参数的类型
|
||||||
|
interface IDialogProps {
|
||||||
|
/** 弹框标题 */
|
||||||
|
title?: string
|
||||||
|
/** 弹框宽度 */
|
||||||
|
width?: string | number
|
||||||
|
/** 内容区域高度 */
|
||||||
|
height?: string | number
|
||||||
|
/** 确认按钮文本 */
|
||||||
|
confirmText?: string
|
||||||
|
/** 取消按钮文本 */
|
||||||
|
cancelText?: string
|
||||||
|
/** 全屏显示 */
|
||||||
|
fullscreen?: boolean
|
||||||
|
/** 确认按钮加载状态 */
|
||||||
|
loading?: boolean
|
||||||
|
/** 隐藏底部按钮 */
|
||||||
|
footerHidden?: boolean
|
||||||
|
/** 自动聚焦 */
|
||||||
|
autoFocus?: boolean
|
||||||
|
/** 居中显示 */
|
||||||
|
center?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置默认值
|
||||||
|
const props = withDefaults(defineProps<IDialogProps>(), {
|
||||||
|
title: '提示',
|
||||||
|
width: 500,
|
||||||
|
height: 'auto',
|
||||||
|
confirmText: '确定',
|
||||||
|
cancelText: '取消',
|
||||||
|
fullscreen: false,
|
||||||
|
loading: false,
|
||||||
|
footerHidden: false,
|
||||||
|
autoFocus: true,
|
||||||
|
center: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 定义事件
|
||||||
|
const emits = defineEmits<{
|
||||||
|
novaConfirm: []
|
||||||
|
novaCancel: []
|
||||||
|
novaClose: []
|
||||||
|
}>()
|
||||||
|
|
||||||
|
// 弹框显示状态
|
||||||
|
const visible = ref(false)
|
||||||
|
|
||||||
|
// 确认按钮加载状态，使用toRefs保持响应式
|
||||||
|
const { loading } = toRefs(props)
|
||||||
|
const confirmLoading = ref(loading)
|
||||||
|
|
||||||
|
/** 打开弹框 */
|
||||||
|
function novaOpen() {
|
||||||
|
visible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 关闭弹框 */
|
||||||
|
function novaClose() {
|
||||||
|
visible.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 快速关闭弹框 */
|
||||||
|
function novaQuickClose() {
|
||||||
|
visible.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 确认事件处理 */
|
||||||
|
function handleConfirm() {
|
||||||
|
emits('novaConfirm')
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 取消事件处理 */
|
||||||
|
function handleCancel() {
|
||||||
|
emits('novaCancel')
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 关闭事件处理 */
|
||||||
|
function handleClose() {
|
||||||
|
visible.value = false
|
||||||
|
emits('novaClose')
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 暴露给父组件的方法 */
|
||||||
|
defineExpose({
|
||||||
|
novaOpen,
|
||||||
|
novaClose,
|
||||||
|
novaQuickClose,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<n-modal
|
||||||
|
v-model:show="visible"
|
||||||
|
:mask-closable="false"
|
||||||
|
:close-on-esc="false"
|
||||||
|
:auto-focus="autoFocus"
|
||||||
|
preset="card"
|
||||||
|
:loading="confirmLoading"
|
||||||
|
:show-icon="false"
|
||||||
|
:style="{
|
||||||
|
width: typeof width === 'number' ? `${width}px` : width,
|
||||||
|
}"
|
||||||
|
class="nova-dialog"
|
||||||
|
@close="handleClose"
|
||||||
|
>
|
||||||
|
<!-- 头部插槽 -->
|
||||||
|
<template #header>
|
||||||
|
<div v-if="$slots.header" class="nova-dialog-custom-header">
|
||||||
|
<slot name="header" />
|
||||||
|
</div>
|
||||||
|
<div v-else class="nova-dialog-header">
|
||||||
|
<div class="nova-dialog-title">
|
||||||
|
{{ title }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 内容区域 -->
|
||||||
|
<div
|
||||||
|
class="nova-dialog-content"
|
||||||
|
:style="{
|
||||||
|
height: fullscreen ? 'auto' : (typeof height === 'number' ? `${height}px` : height),
|
||||||
|
overflow: height === 'auto' ? 'visible' : 'auto',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<slot name="content" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 底部操作区域 -->
|
||||||
|
<template #footer>
|
||||||
|
<div v-if="!footerHidden" class="nova-dialog-footer">
|
||||||
|
<NSpace justify="center">
|
||||||
|
<NButton
|
||||||
|
size="medium"
|
||||||
|
@click="handleCancel"
|
||||||
|
>
|
||||||
|
{{ cancelText }}
|
||||||
|
</NButton>
|
||||||
|
<NButton
|
||||||
|
type="primary"
|
||||||
|
size="medium"
|
||||||
|
:loading="confirmLoading"
|
||||||
|
@click="handleConfirm"
|
||||||
|
>
|
||||||
|
{{ confirmText }}
|
||||||
|
</NButton>
|
||||||
|
</NSpace>
|
||||||
|
</div>
|
||||||
|
<div v-else />
|
||||||
|
</template>
|
||||||
|
</n-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 弹框标题样式 */
|
||||||
|
.nova-dialog :deep(.n-card-header) {
|
||||||
|
padding: 0;
|
||||||
|
border-bottom: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nova-dialog-header {
|
||||||
|
padding: 12px 16px 8px;
|
||||||
|
background: white;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nova-dialog-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #1a1a1a;
|
||||||
|
line-height: 1.4;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nova-dialog-custom-header {
|
||||||
|
padding: 12px 16px 8px;
|
||||||
|
background: white;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 弹框整体样式 */
|
||||||
|
.nova-dialog :deep(.n-card) {
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 内容区域样式 */
|
||||||
|
.nova-dialog :deep(.n-card__content) {
|
||||||
|
padding: 0;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nova-dialog-content {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部样式 */
|
||||||
|
.nova-dialog :deep(.n-card__footer) {
|
||||||
|
padding: 8px 16px 12px;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nova-dialog-footer {
|
||||||
|
/* 底部操作区域样式已由 n-space 处理 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user