spring
6 小时以前 b4e559be27b15cef3388cca703d916d591d05bbd
src/components/Dialog/FormDialog.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,86 @@
<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>