Notification 弹窗
常用于消息提示。
基础使用
调用一个系统消息。
查看代码
vue
<template>
<demo-container>
<gov-button @click="handleClick">点击弹出Notification</gov-button>
</demo-container>
</template>
<script setup>
import { GovNotification } from "@/dist/index.js";
const handleClick = () => {
GovNotification({
tite: "系统提示!",
content: "您正在访问GovUI",
});
};
</script>
不同类型
不同类型的系统提示消息。
查看代码
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 { GovNotification } from "@/dist/index.js";
const handleClick = (type) => {
GovNotification({
title: "系统提示",
type,
content: `打开 ${type} 类型的消息`,
});
};
</script>
自定义内容
支持html
。
查看代码
vue
<template>
<demo-container>
<gov-button @click="handleClick">点击弹出Notification</gov-button>
</demo-container>
</template>
<script setup>
import { GovNotification } from "@/dist/index.js";
const handleClick = () => {
GovNotification({
title: "系统提示!",
content: `您正在访问<b style="color:red">GovUI</b>`,
});
};
</script>
不同位置
四种位置。
查看代码
vue
<template>
<demo-container>
<gov-button @click="handleClick('top-right')">Top Right</gov-button>
<gov-button @click="handleClick('bottom-right')">
Bottom Right
</gov-button>
<gov-button @click="handleClick('bottom-left')">Bottom Left</gov-button>
<gov-button @click="handleClick('top-left')">Top Left</gov-button>
</demo-container>
</template>
<script setup>
import { GovNotification } from "@/dist/index.js";
const handleClick = (position) => {
GovNotification({
title: "系统提示",
content: `打开 ${position} 类型的消息`,
position,
});
};
</script>
关闭所有
你可以调用 closeAll
关闭所有 notification
。
查看代码
vue
<template>
<demo-container>
<gov-button @click="handleClick">多点两次</gov-button>
<gov-button @click="hancleCloseAll">点击关闭所有</gov-button>
</demo-container>
</template>
<script setup>
import { GovNotification } from "@/dist/index.js";
const handleClick = () => {
GovNotification("Hello Word!");
};
const hancleCloseAll = () => {
GovNotification.closeAll();
};
</script>
禁用自动关闭
默认 3000ms
后自动关闭,你可以将 duration
设置为 false
即可控制 notification
不会自动关闭。
查看代码
vue
<template>
<demo-container>
<gov-button @click="handleClick">点击弹出Notification</gov-button>
</demo-container>
</template>
<script setup>
import { GovNotification } from "@/dist/index.js";
const handleClick = () => {
GovNotification({
tite: "系统提示!",
content: "您正在访问GovUI",
duration: false, // 不关闭
});
};
</script>
Options
属性名 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
title | 通知标题 | String | — | "提示" |
content | 通知内容 | String | — | — |
duration | 显示时长,设置false的时候不会自动关闭。 | Number | boolean | — | 3000 |
type | 通知类型 | String | default, primary, success, info, warning, danger | default |
position | 通知位置 | String | top-right, top-left, bottom-right, bottom-left | top-right |
icon | 图标名称 | String | — | — |
customClass | 自定义类名 | String | — | — |
onBeforeOpen | 打开前回调函数 | Function | — | — |
onOpend | 打开后回调函数 | Function | — | — |
onBeforeClose | 关闭前回调函数 | Function | — | — |
onClosed | 关闭后回调函数 | Function | — | — |
closable | 是否显示关闭按钮 | Boolean | true, false | true |
Methods
方法名 | 说明 | 参数 | 返回值 |
---|---|---|---|
closeAll | 关闭所有 notification 弹窗 | — | 无 |