<!-- NormalSimpleDialog.vue -->
<template>
  <el-dialog v-model="model">
    <span>这是一个声明式弹窗</span>
  </el-dialog>
</template>

<script setup lang="ts">
const model = defineModel();
</script>

<!-- App.vue -->
<template>
  <div>
    <el-button @click="model = true">打开声明式弹窗</el-button>
    <NormalSimpleDialog v-model="dialogVisible" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import NormalSimpleDialog from "./NormalSimpleDialog.vue";

const model = ref(false);
</script>

<!-- ImperativeSimpleDialog.vue -->
<template>
  <el-dialog v-model="isOpen">
    <span>这是一个命令式弹窗</span>
  </el-dialog>
</template>

<script setup lang="ts">
const isOpen = ref(false);

const open = () => {
  isOpen.value = true;
};

defineExpose({
  open,
});
</script>

<!-- App.vue -->
<template>
  <div>
    <el-button @click="openDialog">打开命令式弹窗</el-button>
    <ImperativeSimpleDialog ref="dialog" />
  </div>
</template>


<script setup lang="ts">
const dialog = ref<InstanceType<typeof ImperativeSimpleDialog>>();

const openDialog = () => {
  dialog.value?.open();
};

<!-- NormalConfirmDialog.vue -->
<template>
  <el-dialog v-model="model">
    <span>这是一个声明式确认对话框</span>
    <template #footer>
      <el-button @click="onCancel">取消</el-button>
      <el-button
        type="primary"
        @click="onConfirm"
      >
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
const model = defineModel();

const emit = defineEmits(["confirm", "cancel"]);

const onCancel = () => {
  emit("cancel");
  model.value = false;
};
const onConfirm = () => {
  emit("confirm");
  model.value = false;
};
</script>

<!-- App.vue -->
<template>
  <div>
    <el-button @click="model = true">打开声明式确认对话框</el-button>
    <NormalConfirmDialog
      v-model="dialogVisible"
      @confirm="onConfirm"
    />
  </div>
</template>

<script setup lang="ts">
const model = ref(false);

const onCancel = () => {
  ElMessage.error("对话框点击取消");
};

const onConfirm = () => {
  ElMessage.success("对话框点击确认");
};
</script>

<!-- ImperativeConfirmDialog.vue -->
<template>
  <el-dialog v-model="isOpen">
    <span>这是一个命令式确认对话框</span>
    <template #footer>
      <el-button @click="onCancel">取消</el-button>
      <el-button
        type="primary"
        @click="onConfirm"
      >
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
const isOpen = ref(false);

let dialogResolve: (value?: any) => void; const open = () => {
  isOpen.value = true;

  // 返回一个 Promise 对象，并且将resolve函数赋值给一个外部变量
  return new Promise((resolve) => {
    dialogResolve = resolve;
  });
};

const onConfirm = () => {
  isOpen.value = false;
  dialogResolve?.(true);
};

const onCancel = () => {
  isOpen.value = false;
  dialogResolve?.(false);
};

defineExpose({
  open,
});
</script>

<!-- App.vue -->
<template>
  <div>
    <el-button @click="openDialog">打开命令式确认对话框</el-button>
    <ImperativeConfirmDialog ref="dialog" />
  </div>
</template>

<script setup lang="ts">
const dialog = ref<InstanceType<typeof ImperativeConfirmDialog>>();

// 打开对话框和对话框确认后的逻辑可以放在同一个方法中
const openDialog = async() => {
  try {
    const result = await dialog.value?.open();
    if (!result) throw new Error("取消");
    ElMessage.success("对话框点击确认");
  } catch (e) {
    ElMessage.error("对话框点击取消");
  }
}

<!-- NormalFormDialog.vue -->
<template>
  <el-dialog v-model="model">
    <span>这是一个声明式表单对话框</span>
    <el-form
      :model="form"
      label-width="100px"
    >
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="onCancel">取消</el-button>
      <el-button
        type="primary"
        @click="onConfirm"
      >
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
const model = defineModel();

const form = ref<FormData>({
  name: "",
});

const emit = defineEmits(["confirm", "cancel"]);

const onCancel = () => {
  emit("cancel");
  model.value = false;
};

const onConfirm = () => {
  emit("confirm", form.value);
  model.value = false;
};
</script>

<!-- App.vue -->
<template>
  <div>
    <el-button @click="dialogVisible = true">打开声明式表单对话框</el-button>
    <NormalFormDialog
      v-model="dialogVisible"
      @cancel="onCancel"
      @confirm="onConfirm"
    />
  </div>
</template>

<script setup lang="ts">
import NormalFormDialog from "./NormalFormDialog.vue";

const dialogVisible = ref(false);

const onCancel = () => {
  ElMessage.error("对话框点击取消");
};

const onConfirm = (form: FormData) => {
  ElMessage.success("表单对话框点击确认" + JSON.stringify(form));
};
</script>

<!-- ImperativeFormDialog.vue -->
<template>
  <el-dialog v-model="isOpen">
    <span>这是一个命令式表单对话框</span>
    <el-form
      :model="form"
      label-width="100px"
    >
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="onCancel">取消</el-button>
      <el-button
        type="primary"
        @click="onConfirm"
      >
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
const isOpen = ref(false);

const form = ref({
  name: '',
});

let dialogResolve: (value?: FormData) => void;
const open = () => {
  isOpen.value = true;
  return new Promise<FormData>((resolve) => {
    dialogResolve = resolve;
  });
};

const onConfirm = () => {
  isOpen.value = false;
  dialogResolve?.(form.value);
};

const onCancel = () => {
  isOpen.value = false;
  dialogResolve?.(false);
};

defineExpose({
  open,
});
</script>

<!-- App.vue -->
<template>
  <div>
    <el-button @click="openDialog">打开命令式确认对话框</el-button>
    <ImperativeFormDialog ref="dialog" />
  </div>
</template>

<script setup lang="ts">
const dialog = ref<InstanceType<typeof ImperativeFormDialog>>();

const openDialog = async() => {
  try {
    const result = await dialog.value?.open();
    if (!result) throw new Error("取消");
    ElMessage.success("对话框点击确认" + JSON.stringify(result));
  } catch (e) {
    ElMessage.error("对话框点击取消");
  }
}