Notification 通知

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

基础用法

<script setup lang="ts">
import { h } from "vue";
import { hyNotification } from "hy-element";

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

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

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

不同类型的通知

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

<script lang="ts" setup>
import { hyNotification } from "hy-element";

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

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

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

const open4 = () => {
  (hyNotification as Function)({
    title: "hyror",
    message: "This is an hyror message",
    type: "danghy",
  });
};
</script>

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

隐藏关闭按钮

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

<script lang="ts" setup>
import { hyNotification } from 'hy-element'

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

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

全局方法

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

单独引用

import { hyNotification } from "hy-element";

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