Element Plus 组件库 - MessageBox 编码模板（确认框与输入框 Promise 编码模板、确认框与输入框 async - await 编码模板）

一、确认框（Confirm）编码模板

1、Promise 编码模板

import { ElMessageBox } from "element-plus";

ElMessageBox.confirm("这是消息，这是消息", "标题", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
})
    .then(() => {
        console.log("点击了确定");
    })
    .catch((error) => {
        if (error === "cancel") {
            console.log("点击了取消");
        }
    });

2、async - await 编码模板

import { ElMessageBox } from "element-plus";

try {
    await ElMessageBox.confirm("这是消息，这是消息", "标题", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    });
    console.log("点击了确定！");
} catch (error) {
    if (error === "cancel") {
        console.log("点击了取消！");
    }
}

---

二、输入框（Prompt）模板

1、Promise 编码模板

ElMessageBox.prompt("这是消息，这是消息", "标题", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
})
    .then(({ value }) => {
        console.log("点击了确定，输入的内容是：" + value);
    })
    .catch((error) => {
        if (error === "cancel") {
            console.log("点击了取消");
        }
    });

2、async - await 编码模板

try {
    const { value } = await ElMessageBox.prompt("这是消息，这是消息", "标题", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    });
    console.log("点击了确定！输入的内容是：" + value);
} catch (error) {
    if (error === "cancel") {
        console.log("点击了取消！");
    }
}