Notification 通知

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

基础用法

<script setup lang="ts">
import { h } from "vue";
import { EcNotification } from "easy-collective-ui";

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

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

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

不同类型的通知

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

<script lang="ts" setup>
import { EcNotification } from "easy-collective-ui";

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

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

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

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

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

隐藏关闭按钮

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

<script lang="ts" setup>
import { EcNotification } from 'easy-collective-ui'

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

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

全局方法

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

单独引用c

import { EcNotification } from "easy-collective-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