PlanPopup.vue
1.85 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<template>
<div class="flex flex-col h-full bg-gray-50">
<!-- Header -->
<div class="flex justify-between items-center px-5 py-5 bg-white rounded-t-xl">
<span class="text-lg font-normal text-gray-900">{{ title }}</span>
<IconFont name="close" size="16" color="#9CA3AF" @click="handleClose" />
</div>
<!-- Scrollable Content -->
<div class="flex-1 overflow-y-auto p-4">
<div class="bg-white rounded-xl p-5 shadow-sm">
<slot />
</div>
</div>
<!-- Footer Buttons -->
<div class="p-4 pt-2 pb-8 flex justify-between gap-3 bg-gray-50">
<nut-button
plain
type="primary"
class="flex-1 !h-auto !py-2.5 !text-sm"
@click="handleClose"
>
取消
</nut-button>
<nut-button
type="primary"
class="flex-1 !h-auto !py-2.5 !text-sm"
@click="handleSubmit"
>
提交申请
</nut-button>
</div>
</div>
</template>
<script setup>
/**
* @description 计划书弹窗容器组件
* @description 提供统一的头部、底部按钮和布局结构
*
* @props {string} title - 弹窗标题
*
* @emits close - 关闭弹窗事件
* @emits submit - 提交事件
*
* @example
* <PlanPopup title="申请计划书" @close="handleClose" @submit="handleSubmit">
* <!-- 具体的表单内容 -->
* </PlanPopup>
*/
import IconFont from '@/components/IconFont.vue'
defineProps({
/** 弹窗标题 */
title: {
type: String,
default: '计划书'
}
})
const emit = defineEmits(['close', 'submit'])
/**
* 处理关闭事件
*/
const handleClose = () => {
emit('close')
}
/**
* 处理提交事件
*/
const handleSubmit = () => {
emit('submit')
}
</script>
<style lang="less" scoped>
/* 确保 NutUI 按钮样式正确 */
:deep(.nut-button) {
border-radius: 0.5rem /* 8px */;
font-size: 1rem /* 16px */;
}
</style>