graphite-digestion-web/src/components/common/FTDialog/index.vue

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  visible: {
    type: Boolean,
    default: false,
  },
  width: {
    type: String,
    default: '50%',
  },
  okHandle: {
    type: Boolean,
    default: () => {},
  },
})
const emits = defineEmits(['update:visible', 'ok', 'cancel'])

const cancel = () => {
  show.value = false
  emits('cancel')
}

const show = ref(false)

watch(
  () => props.visible,
  (newVal) => {
    show.value = newVal
  },
  {
    // 对于对象需要深度监听
    deep: true,
    immediate: true,
  },
)
</script>

<template>
  <el-dialog
    v-model="show"
    center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    destroy-on-close
    append-to-body
    :title="title"
    :width="width"
    :before-close="cancel"
  >
    <slot />
    <template #footer>
      <div v-if="$slots.footer" class="dialog-footer">
        <slot name="footer" />
      </div>
      <div v-else class="dialog-footer">
        <ft-button :click-handle="cancel">
          取消
        </ft-button>
        <ft-button type="primary" :click-handle="okHandle">
          确认
        </ft-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>