Notification 弹窗

常用于消息提示。

基础使用

调用一个系统消息。

查看代码

<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>

不同类型

不同类型的系统提示消息。

查看代码

<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。

查看代码

<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>

不同位置

四种位置。

查看代码

<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。

查看代码

<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 不会自动关闭。

查看代码

<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 弹窗	—	无