| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <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" |
| | | @click="handleConfirm" |
| | | > |
| | | 确认 |
| | | </el-button> |
| | | <el-button @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%' |
| | | } |
| | | }) |
| | | |
| | | 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' && props.operationType !== 'view') |
| | | |
| | | 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> |
| | | |