Message 弹窗
常用于消息提示。
基础使用
查看代码
vue
<template>
<demo-container>
<gov-button @click="handleClick">点击弹出Message</gov-button>
</demo-container>
</template>
<script setup>
import { GovMessage } from "@/dist/index.js";
const handleClick = () => {
GovMessage("Hello Word！");
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
不同类型
弹出不同风格的 message。
查看代码
vue
<template>
<demo-container>
<gov-button @click="handleClick('default')">默认</gov-button>
<gov-button @click="handleClick('primary')" type="primary">
主要
</gov-button>
<gov-button @click="handleClick('success')" type="success">
成功
</gov-button>
<gov-button @click="handleClick('info')" type="info">信息</gov-button>
<gov-button @click="handleClick('warning')" type="warning">
警告
</gov-button>
<gov-button @click="handleClick('danger')" type="danger">
危险
</gov-button>
</demo-container>
</template>
<script setup>
import { GovMessage } from "@/dist/index.js";
const handleClick = (type) => {
GovMessage({
type,
message: `打开 ${type} 类型的消息`,
});
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
更多控制
支持 html，时长，是否有关闭按钮等。
查看代码
vue
<template>
<demo-container>
<gov-button @click="handleClick">点击查看</gov-button>
</demo-container>
</template>
<script setup>
import { GovMessage } from "@/dist/index.js";
const handleClick = () => {
GovMessage({
type: "primary",
duration: 4000,
closable: true,
message:
"您正在访问<b style='color:red'>GovUI</b>，<i>祝您心情愉快！</i>",
})
.then(() => {
console.log("已经打开！");
})
.catch(() => {
console.log("已经关闭！");
});
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
关闭所有
在任意实例上关闭所有弹窗。
查看代码
vue
<template>
<demo-container>
<gov-button @click="handleClick">点击弹出Message</gov-button>
<gov-button @click="hancleCloseAll">点击关闭所有</gov-button>
</demo-container>
</template>
<script setup>
import { GovMessage } from "@/dist/index.js";
const handleClick = () => {
GovMessage("Hello Word！");
};
const hancleCloseAll = () => {
GovMessage.closeAll();
};
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Options
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| message | 消息内容 | String | — | — |
| duration | 显示时长 | Number | — | 3000 |
| type | 消息类型 | String | default, primary, success, info, warning, danger | default |
| icon | 图标名称 | String | — | — |
| customClass | 自定义类名 | String | — | — |
| onBeforeOpen | 打开前的回调函数 | Function | — | — |
| onOpend | 打开后的回调函数 | Function | — | — |
| onBeforeClose | 关闭前的回调函数 | Function | — | — |
| onClosed | 关闭后的回调函数 | Function | — | — |
| closable | 是否显示关闭按钮 | Boolean | true, false | false |
Methods
| 方法名 | 说明 | 参数 | 返回值 |
|---|---|---|---|
| closeAll | 关闭所有 message 弹窗 | — | 无 |