hy-element

MessageBox 消息弹框 ​

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

TIP

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

消息提示 ​

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

<script setup lang="ts">
import { hyMessageBox, hyMessage } from "hy-element";

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

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

确认消息 ​

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

<script setup lang="ts">
import { hyMessageBox, hyMessage } from "hy-element";

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

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

提交内容 ​

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

<script setup lang="ts">
import { hyMessageBox, hyMessage } from "hy-element";

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

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

使用 VNode ​

message 可以是 VNode。

<script setup lang="ts">
import { h, ref } from "vue";
import { hyMessageBox, hySwitch, type SwitchValueType } from "hy-element";

function open1() {
    hyMessageBox({
        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);
    hyMessageBox({
        title: "Message",
        message: () =>
            h(hySwitch as any, {
                modelValue: checked.value,
                "onUpdate:modelValue": (val: SwitchValueType) => {
                    checked.value = val;
                },
            }),
    });
}
</script>

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

个性化 ​

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

<script setup lang="ts">
import { h } from "vue";
import { hyMessage, hyMessageBox } from "hy-element";
import { delay } from "lodash-es";

async function openMsgBox() {
    try {
        const action = await hyMessageBox({
            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);
            },
        });

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

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

内容居中 ​

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

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

<script setup lang="ts">
import { hyMessage, hyMessageBox } from "hy-element";

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

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

全局方法 ​

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

单独引用 ​

typescript
import { hyMessageBox } from "eric-ui";

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