Sword Design

MessageBox 消息弹框 ​

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

TIP

从设计上来说，MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt，因此适合展示较为简单的内容。

消息提示 ​

调用 SwdMessageBox.alert 方法以打开 alert 框。

<script setup lang="ts">
import { SwdMessageBox, SwdMessage } from "swd-design";

function openAlert() {
  SwdMessageBox.alert("This is a message", "Title")
    .then((action) => {
      SwdMessage.info(`action: ${action}`);
    })
    .catch((action) => {
      SwdMessage.warning(`action: ${action}`);
    });
}
</script>

<template>
  <swd-button @click="openAlert" plain> Click to open the Alert</swd-button>
</template>

确认消息 ​

调用 SwdMessageBox.confirm 方法以打开 confirm 框。

<script setup lang="ts">
import { SwdMessageBox, SwdMessage } from "swd-design";

function openConfirm() {
  SwdMessageBox.confirm("proxy will permanently delete the file. Continue?", "Warning", { type: "warning" })
    .then((action) => {
      SwdMessage.info(`action: ${action}`);
    })
    .catch((action) => {
      SwdMessage.warning(`action: ${action}`);
    });
}
</script>

<template>
  <swd-button @click="openConfirm" plain> Click to open the Confirm</swd-button>
</template>

提交内容 ​

调用 SwdMessageBox.prompt 方法以打开 prompt 框。

<script setup lang="ts">
import { SwdMessageBox, SwdMessage } from "swd-design";

function openConfirm() {
  SwdMessageBox.prompt("Place input your name", "Tip", { type: "info" })
    .then(({ value }) => {
      SwdMessage.info(`your name is: ${value}`);
    })
    .catch((action) => {
      SwdMessage.warning(`action: ${action}`);
    });
}
</script>

<template>
  <swd-button @click="openConfirm" plain> Click to open the Confirm</swd-button>
</template>

使用 VNode ​

message 可以是 VNode。

<script setup lang="ts">
import { h, ref } from "vue";
import { SwdMessageBox, SwdSwitch, type SwitchValueType } from "swd-design";

function open1() {
  SwdMessageBox({
    title: "Message",
    message: h("p", null, [
      h("span", null, "Message can be "),
      h("i", { style: "color: teal" }, "VNode"),
    ]),
  });
}

function open2() {
  const checked = ref<SwitchValueType>(false);
  SwdMessageBox({
    title: "Message",
    message: () =>
      h(SwdSwitch, {
        modelValue: checked.value,
        "onUpdate:modelValue": (val: SwitchValueType) => {
          checked.value = val;
        },
      }),
  });
}
</script>

<template>
  <swd-button @click="open1" plain>Common VNode</swd-button>
  <swd-button @click="open2" plain>Dynamic props</swd-button>
</template>

个性化 ​

可以通过配置 SwdMessageBox 的参数来实现一些个性化需求（options 参数见下文）。

<script setup lang="ts">
import { h } from "vue";
import { SwdMessage, SwdMessageBox } from "swd-design";
import { delay } from "lodash-es";

async function openMsgBox() {
  try {
    const action = await SwdMessageBox({
      title: "Message",
      message: h("p", null, [
        h("span", null, "Message can be "),
        h("i", { style: "color: teal" }, "VNode"),
      ]),
      showCancelButton: true,
      confirmButtonText: "Yes",
      cancelButtonText: "No",
      type: "danger",
      icon: "trash",
      beforeClose(action, instance, done) {
        if (action !== "confirm") {
          done();
          return;
        }

        instance.confirmButtonLoading = true;
        instance.confirmButtonText = "Loading...";
        delay(() => {
          done();
          delay(() => (instance.confirmButtonLoading = false), 1000);
        }, 3000);
      },
    });

    SwdMessage.info(`action : ${action}`);
  } catch (action) {
    SwdMessage.warning(`action : ${action}`);
  }
}
</script>

<template>
  <swd-button @click="openMsgBox" plain>Click to open Message Box</swd-button>
</template>

内容居中 ​

消息弹框支持使用居中布局。

center 参数为 true 时，消息弹框内容会居中。

<script setup lang="ts">
import { SwdMessage, SwdMessageBox } from "swd-design";

function openMsgBox() {
  SwdMessageBox.confirm(
    "proxy will permanently delete the file. Continue?",
    "Warning",
    {
      type: "warning",
      center: true,
      // 这里展示一下 不用 Promise 写法的时候
      callback(action) {
        if (action === "confirm") {
          SwdMessage.info(action);
        } else {
          SwdMessage.warning(action as string);
        }
      },
    }
  );
}
</script>

<template>
  <swd-button @click="openMsgBox" plain>Click to open Message Box</swd-button>
</template>

全局方法 ​

SwdMessageBox 提供了全局方法 SwdMessageBox.alert、SwdMessageBox.confirm、SwdMessageBox.prompt，用于在需要时弹出消息弹框。 如果完整引入了 SwdUI, 则会为 app.config.globalProperties 添加全局方法 $msgbox、$alert、$confirm、$prompt。 在 Vue 实例中可以作为 this.$msgbox、this.$alert、this.$confirm、this.$prompt 使用。

单独引用 ​

typescript
import { SwdMessageBox } from "swd-design";

MessageBox API ​

Options ​

NameDescriptionTypeDefault
titleMessageBox 标题string--
messageMessageBox 消息正文内容string | VNode | () => VNode--
typeMessageBox 类型,用于图标展示enum - 'success' | 'warning' | 'info' | 'error' |'danger'--
iconMessageBox 图标string--
callbackMessageBox 关闭回调函数(action: MessageBoxAction) => void--
show-close是否显示关闭按钮booleantrue
before-close关闭前的回调函数，会暂停 MessageBox 的关闭(action: MessageBoxAction,instance:MessageBoxOptions,done:()=>void) => void--
show-confirm-button是否显示确认按钮booleantrue
show-cancel-button是否显示取消按钮booleanfalse
confirm-button-text确认按钮的文字stringOK
cancel-button-text取消按钮的文字stringCancel
confirm-button-type确认按钮的类型stringprimary
cancel-button-type取消按钮的类型string--
confirm-button-disabled是否禁用确认按钮booleanfalse
confirm-button-loading是否显示确认按钮的加载状态booleanfalse
cancel-button-disabled是否禁用取消按钮booleanfalse
cancel-button-loading是否显示取消按钮的加载状态booleanfalse
close-on-click-modal点击遮罩是否允许关闭booleantrue
show-input是否显示输入框booleanfalse
input-placeholder输入框的提示文字stringPlace input...
input-type输入框的类型stringtext
input-value输入框的初始值string''
center是否居中显示booleanfalse
round-button是否显示圆角按钮booleanfalse
button-size按钮大小，可选值为 default、large 、smallstringdefault