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