Easy UI

Notification 通知 ​

用于系统级通知或轻量级提醒，常用于页面右上角或指定位置短暂提示。

引入 ​

js

html
<script type="module">
  import "./node_modules/easy-component-ui/components/ea-notification/index.js";
</script>

css

TIP

如果需要使用图标，请提前引入图标样式文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

基础用法 ​

从 placement 指定的位置出现，默认 3 秒后自动消失。

Closes automatically Won't close automatically
html
<div id="basicSection" class="demo row left">
  <ea-button id="basic1" plain> Closes automatically </ea-button>
  <ea-button id="basic2" plain> Won't close automatically </ea-button>
</div>
js
const basicExample = {
  btn1: document.querySelector("#basicSection #basic1"),
  btn2: document.querySelector("#basicSection #basic2"),

  init() {
    this.btn1.addEventListener("click", () => {
      EaNotification({
        title: "Title",
        message: "This is a message that automatically close",
      });
    });

    this.btn2.addEventListener("click", () => {
      EaNotification({
        title: "Prompt",
        message: "This is a message that does not automatically close",
        duration: 0,
      });
    });
  },
};
basicExample.init();

不同类型的通知 ​

支持 success / warning / info / error / primary 类型，通过 type 改变样式。

InfoPrimarySuccessWarningError
html
<div id="typeSection" class="demo row left">
  <ea-button plain>Info</ea-button>
  <ea-button type="primary" plain>Primary</ea-button>
  <ea-button type="success" plain>Success</ea-button>
  <ea-button type="warning" plain>Warning</ea-button>
  <ea-button type="danger" plain>Error</ea-button>
</div>
js
const typeExample = {
  btns: document.querySelectorAll("#typeSection ea-button"),

  init() {
    this.btns.forEach(btn => {
      btn.addEventListener("click", () => {
        EaNotification({
          type: btn.textContent.toLowerCase(),
          title: btn.textContent,
          message: "This is a message",
        });
      });
    });
  },
};
typeExample.init();

自定义位置 ​

支持 top-right、top-left、bottom-right、bottom-left 四个位置，通过 placement 配置。

Top Right Bottom Right Bottom Left Top Left
html
<div class="demo row left" id="placementSection">
  <ea-button plain> Top Right </ea-button>
  <ea-button plain> Bottom Right </ea-button>
  <ea-button plain> Bottom Left </ea-button>
  <ea-button plain> Top Left </ea-button>
</div>
js
const placementExample = {
  btns: document.querySelectorAll("#placementSection ea-button"),
  init() {
    this.btns.forEach(btn => {
      btn.addEventListener("click", () => {
        EaNotification({
          title: "Custom Position",
          message: "This is a message",
          placement: btn.textContent.trim().toLowerCase().replace(" ", "-"),
        });
      });
    });
  },
};
placementExample.init();

使用 HTML 片段作为正文内容 ​

将 dangerouslyUseHTMLString 设为 true 可以让 message 被当作 HTML 片段渲染。

Use HTML String
html
<div class="demo" id="useHTMLSection">
  <ea-button plain> Use HTML String </ea-button>
</div>
js
const htmlExample = {
  btn: document.querySelector("#useHTMLSection ea-button"),
  init() {
    this.btn.addEventListener("click", () => {
      EaNotification({
        title: "HTML String",
        dangerouslyUseHTMLString: true,
        message: "<strong>This is <i>HTML</i> string</strong>",
      });
    });
  },
};
htmlExample.init();

隐藏关闭按钮 ​

通过 showClose 控制是否显示右上角关闭按钮。

Hide close button
html
<div class="demo" id="hideCloseSection">
  <ea-button plain> Hide close button </ea-button>
</div>
js
const hideCloseExample = {
  btn: document.querySelector("#hideCloseSection ea-button"),
  init() {
    this.btn.addEventListener("click", async () => {
      EaNotification.success({
        title: "Info",
        message: "This is a message without close button",
        showClose: false,
      });
    });
  },
};
hideCloseExample.init();

Attributes ​

参数说明类型可选值默认值
title标题string—''
message正文内容string—''
type通知类型enum'success' | 'warning' | 'info' | 'error' | 'primary''info'
icon自定义图标 classstring—''
duration显示时间（毫秒）。设为 0 则不会自动关闭number—3000
placement出现位置enum`'top-right' | 'top-left' | 'bottom-right' | 'bottom-left''top-right'`
showClose是否显示关闭按钮boolean—true
closeIcon关闭按钮图标 classstring—'icon-cancel'
zIndexz-index 值number—0
dangerouslyUseHTMLString是否把 message 当作 HTML 渲染boolean—false
appendTo指定挂载容器，支持选择器或 HTMLElementCSSSelector—'body'

CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container通知整体根元素
icon类型图标
header标题区域
title标题文本
close-icon关闭按钮
main正文内容区域

Events ​

事件名称说明
show显示时触发
shown显示完毕时触发
hide隐藏时触发
hidden隐藏完毕时触发
close关闭时触发（可以手动调用实例的 close）

Methods ​

名称描述类型
close关闭当前的 Notification 实例Function: () => void