Notification 通知

悬浮出现在页面角落，显示全局的通知提醒消息。

基础用法

<script setup lang="ts">
import { h } from "vue";
import { ErNotification } from "eric-ui";

function openNotify1() {
  ErNotification({
    title: "Title",
    message: h("i", { style: "color:teal" }, "This is a remider"),
    position:'bottom-right'
  });
}

function openNotify2() {
  ErNotification({
    title: "Prompt",
    message: "This is a message that does not auto close",
    duration: 0,
    position:'top-left'
  });
}
</script>

<template>
  <er-button @click="openNotify1" plain>Closes automatically</er-button>
  <er-button @click="openNotify2" plain>Won't closes automatically</er-button>
</template>

不同类型的通知

提供了四种不同类型的提醒框：success、warning、info 和 error (danger 效果和 error 相同)。

<script lang="ts" setup>
import { ErNotification } from "eric-ui";

const open1 = () => {
  ErNotification({
    title: "Success",
    message: "This is a success message",
    type: "success",
  });
};

const open2 = () => {
  ErNotification({
    title: "Warning",
    message: "This is a warning message",
    type: "warning",
  });
};

const open3 = () => {
  ErNotification({
    title: "Info",
    message: "This is an info message",
    type: "info",
  });
};

const open4 = () => {
  ErNotification({
    title: "Error",
    message: "This is an error message",
    type: "danger",
  });
};
</script>

<template>
  <er-button plain @click="open1"> Success </er-button>
  <er-button plain @click="open2"> Warning </er-button>
  <er-button plain @click="open3"> Info </er-button>
  <er-button plain @click="open4"> Error </er-button>
</template>

隐藏关闭按钮

可以通过设置 closable 属性来隐藏关闭按钮。

<script lang="ts" setup>
import {ErNotification} from 'eric-ui'

const open = () => {
  ErNotification.success({
    title: 'Info',
    message: 'This is a message without close button',
    showClose: false,
  })
}
</script>

<template>
  <er-button plain @click="open"> Hide close button </er-button>
</template>

全局方法

通过全局方法 $notify 调用，可以弹出通知。

单独引用

import { ErNotification } from "eric-ui";

Notification API

Options

Name	Description	Type	Default
title	标题	string	-
message	通知正文内容	string | VNode	-
type	通知的类型	enum - info | success | warning | error | danger	info
icon	自定义图标	string	-
duration	显示时间	number	3000
showClose	是否显示关闭按钮	boolean	true
onClose	关闭时的回调函数	() => void	-
onClick	点击时的回调函数	() => void	-
offset	偏移	number	20

Handler

Name	Description	Type
close	关闭 Notification	() => void