Skip to content

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 | boolean3000
type通知类型Stringdefault, primary, success, info, warning, dangerdefault
position通知位置Stringtop-right, top-left, bottom-right, bottom-lefttop-right
icon图标名称String
customClass自定义类名String
onBeforeOpen打开前回调函数Function
onOpend打开后回调函数Function
onBeforeClose关闭前回调函数Function
onClosed关闭后回调函数Function
closable是否显示关闭按钮Booleantrue, falsetrue

Methods

方法名说明参数返回值
closeAll关闭所有 notification 弹窗

Released under the MIT License.