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>
| <el-dialog v-model="dialogVisible"
| :title="computedTitle"
| :width="width"
| @close="handleClose">
| <slot></slot>
| <template #footer>
| <div class="dialog-footer">
| <!-- 自定义按钮插槽 -->
| <slot name="footer">
| <el-button v-if="showConfirm"
| type="primary"
| :loading="loading"
| @click="handleConfirm">
| 确认
| </el-button>
| <el-button :disabled="loading" @click="handleCancel">取消</el-button>
| </slot>
| </div>
| </template>
| </el-dialog>
| </template>
|
| <script setup>
| import { computed } from "vue";
|
| const props = defineProps({
| modelValue: {
| type: Boolean,
| default: false,
| },
| title: {
| type: [String, Function],
| default: "",
| },
| operationType: {
| type: String,
| default: "",
| },
| width: {
| type: String,
| default: "70%",
| },
| loading: {
| type: Boolean,
| default: false,
| },
| });
|
| const emit = defineEmits(["update:modelValue", "close", "confirm", "cancel"]);
|
| const dialogVisible = computed({
| get: () => props.modelValue,
| set: val => emit("update:modelValue", val),
| });
|
| // 详情模式不展示“确认”按钮，其它类型正常显示
| const showConfirm = computed(() => props.operationType !== "detail");
|
| const computedTitle = computed(() => {
| if (typeof props.title === "function") {
| return props.title(props.operationType);
| }
| return props.title;
| });
|
| const handleClose = () => {
| emit("close");
| };
|
| const handleConfirm = () => {
| emit("confirm");
| };
|
| const handleCancel = () => {
| emit("cancel");
| dialogVisible.value = false;
| };
| </script>
|
| <style scoped>
| .dialog-footer {
| text-align: center;
| }
| </style>
|
|
