ea-ui

Message 消息提示 ​

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

引入 ​

js

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

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

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

自定义样式 ​

移步到 CSS Part。

基础用法 ​

从顶部出现，3 秒后自动消失。

文本类消息提示(info)
查看代码

html

html
<div class="demo">
  <ea-button id="messageTextBtn">文本类消息提示(info)</ea-button>
</div>

js

js
const btn = document.getElementById("messageTextBtn");
btn.addEventListener("click", () => {
  window.$message.open("1");
});

不同状态 ​

用来显示「成功、警告、消息、错误」类的操作反馈。通过设置 option 中的 type 属性来改变主题。

对象类消息提示(info)对象类消息提示(success)对象类消息提示(error)对象类消息提示(warning)
查看代码

html

html
<div class="row left">
  <ea-button id="messageObjectBtn">对象类消息提示(info)</ea-button>
  <ea-button id="messageSuccessObjectBtn" type="success">
    对象类消息提示(success)
  </ea-button>
  <ea-button id="messageErrorObjectBtn" type="danger">
    对象类消息提示(error)
  </ea-button>
  <ea-button id="messageWarningObjectBtn" type="warning">
    对象类消息提示(warning)
  </ea-button>
</div>

js

js
const differentController = {
  objectBtn: document.getElementById("messageObjectBtn"),
  successObjectBtn: document.getElementById("messageSuccessObjectBtn"),
  errorObjectBtn: document.getElementById("messageErrorObjectBtn"),
  warningObjectBtn: document.getElementById("messageWarningObjectBtn"),

  addEvent(btn, fn) {
    btn.addEventListener("click", () => {
      if (fn) fn();
    });
  },

  init() {
    this.addEvent(this.objectBtn, () => {
      window.$message.open({
        text: "2",
        type: "info",
      });
    });

    this.addEvent(this.successObjectBtn, () => {
      window.$message.open({
        text: "2",
        type: "success",
      });
    });

    this.addEvent(this.errorObjectBtn, () => {
      window.$message.open({
        text: "3",
        type: "error",
      });
    });

    this.addEvent(this.warningObjectBtn, () => {
      window.$message.open({
        text: "3",
        type: "warning",
      });
    });
  },
};

differentController.init();

可关闭 ​

使用 showClose 属性可以让消息提示显示关闭按钮。使用 duration 属性可以让消息提示按照既定的时间自动消失, 若 duration 设置为 0 , 则该消息提示不会自动消失。

对象类消息提示(info)对象类消息提示(不会自动关闭)对象类消息提示(success)对象类消息提示(error)对象类消息提示(warning)
查看代码
html
<div class="row left">
  <ea-button id="messageObjectBtnHasClose">对象类消息提示(info)</ea-button>
  <ea-button id="messageSuccessObjectBtnBtnHasClose" type="success">
    对象类消息提示(success)
  </ea-button>
  <ea-button id="messageErrorObjectBtnBtnHasClose" type="danger">
    对象类消息提示(error)
  </ea-button>
  <ea-button id="messageWarningObjectBtnBtnHasClose" type="warning">
    对象类消息提示(warning)
  </ea-button>
</div>
js
const closableController = {
  closableBtn: document.getElementById("messageObjectBtnHasClose"),
  durationIsZeroBtn: document.getElementById("messageObjectBtnNotClose"),
  successObjectBtn: document.getElementById(
    "messageSuccessObjectBtnBtnHasClose"
  ),
  errorObjectBtn: document.getElementById("messageErrorObjectBtnBtnHasClose"),
  warningObjectBtn: document.getElementById(
    "messageWarningObjectBtnBtnHasClose"
  ),

  addEvent(btn, fn) {
    btn.addEventListener("click", () => {
      if (fn) fn();
    });
  },

  init() {
    this.addEvent(this.closableBtn, () => {
      window.$message.open({
        text: "2",
        showClose: true,
        type: "info",
      });
    });

    this.addEvent(this.durationIsZeroBtn, () => {
      window.$message.open({
        text: "2",
        showClose: true,
        type: "info",
        duration: 0,
      });
    });

    this.addEvent(this.successObjectBtn, () => {
      window.$message.open({
        text: "2",
        showClose: true,
        type: "success",
      });
    });

    this.addEvent(this.errorObjectBtn, () => {
      window.$message.open({
        text: "3",
        showClose: true,
        type: "error",
      });
    });

    this.addEvent(this.warningObjectBtn, () => {
      window.$message.open({
        text: "3",
        showClose: true,
        type: "warning",
      });
    });
  },
};

closableController.init();

文字居中 ​

使用 center 属性让文字水平居中。

文字居中
查看代码
html
<div class="row left">
  <ea-button id="centerMessageObjectBtn">文字居中</ea-button>
</div>
js
const centerController = {
  centerBtn: document.getElementById("centerMessageObjectBtn"),
  init() {
    this.centerBtn.addEventListener("click", () => {
      window.$message.open({
        text: "3",
        showClose: true,
        center: true,
      });
    });
  },
};
centerController.init();

close 事件 ​

自定义 close 事件
查看代码
html
<div class="demo">
  <ea-button id="closeEventBtn">自定义 close 事件</ea-button>
</div>
js
const closeEventController = {
  closeEventBtn: document.getElementById("closeEventBtn"),
  init() {
    this.closeEventBtn.addEventListener("click", () => {
      window.$message
        .open({
          text: "3",
          showClose: true,
          center: true,
        })
        .onClose(() => {
          alert("关闭了");
        });
    });
  },
};
closeEventController.init();

Attributes ​

参数说明类型可选值默认值
text消息提示的内容string——
type主题类型stringsuccess/warning/info/errorinfo
showClose是否显示关闭按钮boolean—false
center文字是否居中boolean—false
duration显示时间, 毫秒。设为 0 则不会自动关闭number—3000

CSS Part ​

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

名称说明
container外层容器
icon类型自带的图标
content-wrap内容容器
icon-cancel关闭按钮

Events ​

事件名称说明
close关闭时的回调函数