MessageBox 消息弹框

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。

消息提示

当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。

Details

<template>
    <a-button type="info"  @click="messageInfo">click to show a message</a-button>
</template>

<script lang="ts" setup>
import { AMessage, AMessageBox } from "amu-ui";

const messageInfo = () => {
    AMessageBox({
        title: "Title",
        content: "This is a message",
        showCancelBtn: false,
    }).then(() => {
        AMessage.message({
            message: "action: confirm",
        });
    });
}
</script>

确认消息

提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。

Details

<template>
  <a-button type="success" @click="showMessageBox">Click to open the Message Box</a-button>
</template>

<script lang="ts" setup>
import { AMessage, AMessageBox } from '../../../../../packages/components';

const showMessageBox = () => {
  AMessageBox({
    title: 'confirm',
    content: 'you will be click the button to close this messagebox, are you ready?',
    showMessageBox: true,
    showCancelBtn: true
  }).then(() => {
    AMessage.message({
      message: "this is a confirm message",
    });
  }).catch(() => {
    AMessage.message({
      message: "action: cancel",
    });
  })

};
</script>

<style>
.a-button {
  margin: 0;
}
</style>