messageboxBox 弹窗
基于 Dialog 组件，通过该组件，可以不用书写组件，快速调用 Alert 和 Confirm。
如果需要更复杂的逻辑结构，建议使用 Dialog 组件。
基础用法 Alert
Alert 一个弹窗。
查看代码
vue
<template>
<demo-container>
<gov-button @click="handleAlert">点击弹出Alert</gov-button>
</demo-container>
</template>
<script setup>
import { GovMessageBox, GovMessage } from "@/dist/index.js";
const handleAlert = () => {
GovMessageBox.alert({
title: "友情提醒",
content: "您正在访问GovUI，祝您心情愉快！",
})
.then(() => {
GovMessage("点击了确定！");
})
.catch(() => {
GovMessage("点击了关闭！");
});
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
确认消息 Confirm
Confirm 一个弹窗。
查看代码
vue
<template>
<demo-container>
<gov-button @click="handleConfirm">点击弹出Confirm</gov-button>
</demo-container>
</template>
<script setup>
import { GovMessageBox, GovMessage } from "@/dist/index.js";
const handleConfirm = () => {
GovMessageBox.confirm({
title: "请您确认",
content: "你当前正在访问GovUI吗？",
})
.then(() => {
GovMessage("点击了确定！");
})
.catch(() => {
GovMessage("点击了关闭！");
});
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
简写方式
如果你的弹出相对简单，你也可以直接传递一个字符串。
查看代码
vue
<template>
<demo-container>
<gov-button @click="handleQuickAlert">点击弹出Alert</gov-button>
<gov-button @click="handleQuickConfirm">点击弹出Confirm</gov-button>
</demo-container>
</template>
<script setup>
import { GovMessageBox } from "@/dist/index.js";
const handleQuickAlert = () => {
GovMessageBox.alert("更加简洁的Alert！");
};
const handleQuickConfirm = () => {
GovMessageBox.confirm("更加简洁的Confirm！");
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Options
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| title | 对话框标题 | String | — | "提示" |
| width | 对话框宽度 | String | — | "450px" |
| content | 对话框内容 | String | — | "" |
| showCancelButton | 是否显示取消按钮 | Boolean | true, false | true |
| showConfirmButton | 是否显示确认按钮 | Boolean | true, false | true |
| cancelButtonText | 取消按钮文本 | String | — | "取消" |
| confirmButtonText | 确认按钮文本 | String | — | "确定" |
| cancelCallback | 取消按钮回调函数 | Function | — | () => {} |
| confirmCallback | 确认按钮回调函数 | Function | — | () => {} |
| closeCallback | 关闭对话框时的回调函数 | Function | — | () => {} |
| closedCallback | 对话框关闭后的回调函数 | Function | — | () => {} |
Methods
| 方法名 | 说明 |
|---|---|
| alert | 弹出一个 alert 弹窗，返回promise。 |
| confirm | 弹出一个 confirm 弹窗，返回promise。 |