essa-platform / es-ng-antd

Blame view

build/Message/Message.js 2.11 KB
Edit Raw Normal View History
3a3ecabe   Imshann   init 
1
 
  import style from "antd/lib/message/style/index.css";
710b4ac0   Imshann   优化 
2
3
4
5
6
 
  angular
      .module("esNgAntd")
      .factory("message", function ($compile, $rootScope, esNgAntd) {
          function Message(type, content, second = 3) {
              esNgAntd.createStyle("ant-message", style);
3a3ecabe   Imshann   init 
7
710b4ac0   Imshann   优化 
8
 
              if (!document.querySelector(".ant-message")) {
3a3ecabe   Imshann   init 
9
10
11
12
13
14
 
                  let wrapperTemplate = `<div class="ant-message"><span></span></div>`;
                  let wrapperElement = document.createElement("div");
                  wrapperElement.innerHTML = wrapperTemplate;
                  document.body.appendChild(wrapperElement);
              }
3a3ecabe   Imshann   init 
15
 
              let messageWrapperElement = document.createElement("div");
710b4ac0   Imshann   优化 
16
 
              messageWrapperElement.innerHTML = this.getTemplate(type, content);
3a3ecabe   Imshann   init 
17
18
19
20
 
              let messageElement = messageWrapperElement.childNodes[0];
              document
                  .querySelector(".ant-message span")
                  .appendChild(messageElement);
710b4ac0   Imshann   优化 
21
 
              $compile(messageElement)($rootScope);
3a3ecabe   Imshann   init 
22
23
24
 
              setTimeout(() => {
                  messageElement.remove();
              }, second * 1000);
710b4ac0   Imshann   优化 
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
          }
  
          Message.prototype.getTemplate = function (type, content) {
              let icon = {
                  info: "InfoCircleFilled",
                  success: "CheckCircleFilled",
                  error: "CloseCircleFilled",
                  warning: "InfoCircleFilled",
              };
              return `<div class="ant-message-notice"><div class="ant-message-notice-content"><div class="ant-message-custom-content ant-message-${type}"><es-icon type="${icon[type]}"></es-icon><span>${content}</span></div></div></div>`;
          };
  
          return {
              info: function (content, second) {
                  new Message("info", content, second);
              },
              success: function (content, second) {
                  new Message("success", content, second);
              },
              error: function (content, second) {
                  new Message("error", content, second);
              },
              warning: function (content, second) {
                  new Message("warning", content, second);
              },
          };
      });