Modal 模态对话框

import { Modal, useModal, ModalMethods } from "@reglow/reui";

<script setup>
import { ref } from "vue";
import { Modal } from "@reglow/reui";

const visible = ref(false);

const handleOk = () => {
  visible.value = false;
};

const handleCancel = () => {
  visible.value = false;
};

const afterClose = () => {
  console.log("对话框已关闭");
};
</script>

<template>
  <button @click="visible = true">打开弹窗</button>

  <Modal
    v-model:visible="visible"
    title="基本对话框"
    @ok="handleOk"
    @cancel="handleCancel"
    @after-close="afterClose"
  >
    <p>This is the content of a basic modal.</p>
    <p>More content...</p>
  </Modal>
</template>

<!-- 无头部 -->
<Modal v-model:visible="visible" :header="null">
  <p>无头部对话框</p>
</Modal>

<!-- 无页脚 -->
<Modal v-model:visible="visible" :footer="null">
  <p>无页脚对话框</p>
</Modal>

<!-- 自定义页脚 -->
<Modal v-model:visible="visible" title="自定义页脚" :footer="null">
  <p>内容</p>
  <template #footer>
    <button class="bg-primary text-white px-4 py-2 rounded-md" @click="visible = false">
      Yes, I Understand
    </button>
  </template>
</Modal>

<Modal v-model:visible="visible" size="small" title="Small (448px)">...</Modal>
<Modal v-model:visible="visible" size="medium" title="Medium (684px)">...</Modal>
<Modal v-model:visible="visible" size="large" title="Large (920px)">...</Modal>
<Modal v-model:visible="visible" size="full-width" title="Full Width">...</Modal>

<Modal
  v-model:visible="visible"
  title="全屏对话框"
  full-screen
  @ok="handleOk"
  @cancel="handleCancel"
>
  <p>This is a full screen modal</p>
</Modal>

<script setup>
import { ref } from "vue";

const visible = ref(false);
const loading = ref(false);

const handleOk = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    visible.value = false;
  }, 2000);
};
</script>

<template>
  <Modal
    v-model:visible="visible"
    title="Loading"
    :confirm-loading="loading"
    @ok="handleOk"
  >
    <p>点击确定后按钮显示 loading</p>
  </Modal>
</template>

<script setup>
import { ModalMethods } from "@reglow/reui";

const showInfo = () => {
  ModalMethods.info({ title: "提示", content: "这是一条信息提示" });
};

const showSuccess = () => {
  ModalMethods.success({ title: "成功", content: "操作成功" });
};

const showError = () => {
  ModalMethods.error({ title: "错误", content: "操作失败" });
};

const showWarning = () => {
  ModalMethods.warning({ title: "警告", content: "请谨慎操作" });
};

const showConfirm = () => {
  ModalMethods.confirm({
    title: "确认",
    content: "确定要执行此操作吗？",
    onOk: () => {
      console.log("确认");
    },
    onCancel: () => {
      console.log("取消");
    },
  });
};
</script>

<template>
  <button @click="showInfo">Info</button>
  <button @click="showSuccess">Success</button>
  <button @click="showError">Error</button>
  <button @click="showWarning">Warning</button>
  <button @click="showConfirm">Confirm</button>
</template>

<script setup>
import { ModalMethods } from "@reglow/reui";

const showAsyncConfirm = () => {
  ModalMethods.confirm({
    title: "异步确认",
    content: "点击确定后模拟异步请求",
    onOk: () => {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve();
        }, 2000);
      });
    },
  });
};
</script>

<template>
  <button @click="showAsyncConfirm">异步确认</button>
</template>

<script setup>
import { useModal } from "@reglow/reui";

const [modal] = useModal();

const showConfirm = () => {
  modal.confirm({
    title: "确认",
    content: "确定要执行此操作吗？",
  });
};
</script>

<template>
  <button @click="showConfirm">Confirm Modal</button>
</template>