本文主要讲解关于autolog.js：一个小而美的toast插件。相关内容，让我们来一起学习下吧！

前言

最近需要做一个关于自动解析矢量瓦片链接地址的内部Demo，这个demo比较简单，所以没有准备引入任何的第三方UI库，所以遇到了一个小问题，toast提示怎么做？

如果像往常一样，我肯定直接用 alert 了，但是一是 alert 会中断体验，不够友好，二是不适用于多个提示共同出现，三是无法区分提示类型，所以我就想着找一个体积小的三方库来实现，但是找来找去，发现没有一个库能入我法眼。

在网上搜索，好像独立的 toast 插件停留在了 jq 时代，靠前的 toast 库居然是 bootstrap 的。所以我决定自己写一个，又小巧，又易用的 toast 插件。

纯 JS 实现

延续 autofit.js 的传统，我依然准备用纯 js 实现，以达到极致的体积、极致的兼容性。此外，还编写了d.ts，支持TS。

autolog.js 诞生了。

它由两部分构成，一个极简单的js，和一个极简单的css。gzip后体积是1.40kb。

在线体验：larryzhu-dev.github.io/autoLarryPa…

js部分（v2.0.0）

const cssStr = `#autolog{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;pointer-events:none;width:100vw;height:100vh;position:fixed;left:0;top:0;z-index:9999999;cursor:pointer;transition:0.2s}#autolog span{pointer-events:auto;width:max-content;animation:fadein 0.4s;animation-delay:0s;border-radius:6px;padding:10px 20px;box-shadow:0 0 10px 6px rgba(0,0,0,0.1);margin:4px;transition:0.2s;z-index:9999999;font-size:14px;display:flex;align-items:center;justify-content:center;gap:4px;height:max-content}#autolog span.hide{opacity:0;pointer-events:none;transform:translateY(-10px);height:0;padding:0;margin:0}.autolog-warn{background-color:#fffaec;color:#e29505}.autolog-error{background-color:#fde7e7;color:#d93025}.autolog-info{background-color:#e6f7ff;color:#0e6eb8}.autolog-success{background-color:#e9f7e7;color:#1a9e2c}.autolog-{background-color:#fafafa;color:#333}@keyframes fadein{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}`;
const svgIcons = {
  warn: `<svg t="1713405237257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2387" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M934.4 770.133333L605.866667 181.333333C586.666667 147.2 550.4 128 512 128c-38.4 0-74.666667 21.333333-93.866667 53.333333L89.6 770.133333c-19.2 34.133333-19.2 76.8 0 110.933334S145.066667 938.666667 183.466667 938.666667h657.066666c38.4 0 74.666667-21.333333 93.866667-57.6 19.2-34.133333 19.2-76.8 0-110.933334z m-55.466667 81.066667c-8.533333 14.933333-23.466667 23.466667-38.4 23.466667H183.466667c-14.933333 0-29.866667-8.533333-38.4-23.466667-8.533333-14.933333-8.533333-34.133333 0-49.066667L473.6 213.333333c8.533333-12.8 23.466667-21.333333 38.4-21.333333s29.866667 8.533333 38.4 21.333333l328.533333 588.8c8.533333 14.933333 8.533333 32 0 49.066667z" fill="#e29505" p-id="2388"></path><path d="M512 746.666667m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z" fill="#e29505" p-id="2389"></path><path d="M512 629.333333c17.066667 0 32-14.933333 32-32v-192c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v192c0 17.066667 14.933333 32 32 32z" fill="#e29505" p-id="2390"></path></svg>`,
  error: `<svg t="1713405212725" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1744" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667z m0 810.666666c-204.8 0-373.333333-168.533333-373.333333-373.333333S307.2 138.666667 512 138.666667 885.333333 307.2 885.333333 512 716.8 885.333333 512 885.333333z" fill="#d93025" p-id="1745"></path><path d="M657.066667 360.533333c-12.8-12.8-32-12.8-44.8 0l-102.4 102.4-102.4-102.4c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l102.4 102.4-102.4 102.4c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 14.933333 8.533333 23.466666 8.533334s17.066667-2.133333 23.466667-8.533334l102.4-102.4 102.4 102.4c6.4 6.4 14.933333 8.533333 23.466667 8.533334s17.066667-2.133333 23.466666-8.533334c12.8-12.8 12.8-32 0-44.8l-106.666666-100.266666 102.4-102.4c12.8-12.8 12.8-34.133333 0-46.933334z" fill="#d93025" p-id="1746"></path></svg>`,
  info: `<svg t="1713405208589" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1582" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M853.333333 138.666667H170.666667c-40.533333 0-74.666667 34.133333-74.666667 74.666666v512c0 40.533333 34.133333 74.666667 74.666667 74.666667h151.466666V917.333333c0 12.8 8.533333 25.6 19.2 29.866667 4.266667 2.133333 8.533333 2.133333 12.8 2.133333 8.533333 0 17.066667-4.266667 23.466667-10.666666l136.533333-138.666667H853.333333c40.533333 0 74.666667-34.133333 74.666667-74.666667V213.333333c0-40.533333-34.133333-74.666667-74.666667-74.666666z m10.666667 586.666666c0 6.4-4.266667 10.666667-10.666667 10.666667H501.333333c-8.533333 0-17.066667 4.266667-23.466666 10.666667l-89.6 93.866666V768c0-17.066667-14.933333-32-32-32H170.666667c-6.4 0-10.666667-4.266667-10.666667-10.666667V213.333333c0-6.4 4.266667-10.666667 10.666667-10.666666h682.666666c6.4 0 10.666667 4.266667 10.666667 10.666666v512z" fill="#0e6eb8" p-id="1583"></path><path d="M512 490.666667H298.666667c-17.066667 0-32 14.933333-32 32S281.6 554.666667 298.666667 554.666667h213.333333c17.066667 0 32-14.933333 32-32S529.066667 490.666667 512 490.666667zM672 341.333333H298.666667c-17.066667 0-32 14.933333-32 32S281.6 405.333333 298.666667 405.333333h373.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z" fill="#0e6eb8" p-id="1584"></path></svg>`,
  success: `<svg t="1713405224326" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2225" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M512 74.666667C270.933333 74.666667 74.666667 270.933333 74.666667 512S270.933333 949.333333 512 949.333333 949.333333 753.066667 949.333333 512 753.066667 74.666667 512 74.666667z m0 810.666666c-204.8 0-373.333333-168.533333-373.333333-373.333333S307.2 138.666667 512 138.666667 885.333333 307.2 885.333333 512 716.8 885.333333 512 885.333333z" fill="#1a9e2c" p-id="2226"></path><path d="M701.866667 381.866667L448 637.866667 322.133333 512c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l149.333334 149.333333c6.4 6.4 14.933333 8.533333 23.466666 8.533334s17.066667-2.133333 23.466667-8.533334l277.333333-277.333333c12.8-12.8 12.8-32 0-44.8-14.933333-12.8-36.266667-12.8-49.066666-2.133333z" fill="#1a9e2c" p-id="2227"></path></svg>`,
};
const autolog = {
  log(text, type = "", time = 2500) {
    if (typeof type === "number") {
      time = type;
      type = "";
    }
    let mainEl = getMainElement();
    let el = document.createElement("span");
    el.className = `autolog-${type}`;
    el.innerHTML = svgIcons[type] + text;
    mainEl.appendChild(el);
    setTimeout(() => {
      el.classList.add("hide");
    }, time - 500);
    setTimeout(() => {
      mainEl.removeChild(el);
      el = null;
    }, time);
  },
};
function getMainElement() {
  let mainEl = document.querySelector("#autolog");
  if (!mainEl) {
    mainEl = document.createElement("div");
    mainEl.id = "autolog";
    document.body.appendChild(mainEl);
    let style = document.createElement("style");
    style.innerHTML = cssStr;
    document.head.insertBefore(style, document.head.firstChild);
  }
  return mainEl;
}
export default autolog;

以上是 autolog.js的全部 js 代码。可以看到只导出了一个 log 方法，而调用此方法，也只需要必填一个参数。

我来讲一下这段代码干了一件什么事

1. 因为有两个可选参数，所以第一步判断一下传了哪个可选参数，这可以在使用时，只传time或者type。
2. 获取主容器，getMainElement 方法返回一个主容器，若主容器不存在，就创建它，这省去了用户手动创建主容器的过程，一般的插件会导出一个 init 方法初始化，这一步可以省去 init 操作。
3. 创建一个 span 标签用于展示 log 内容。
4. 两个定时器，第一个在清除元素的前 0.5 秒为其添加退场动画，第二个清除元素，el = null 可以保证断开引用，防止产生游离dom，防止内存泄漏。

最重要的在于css部分，css承载了最重要的显示逻辑。

css部分

主打一个听劝

昨天评论区掘友建议all in js，今天一早我已经改完了，并发了2.0.0版本，把css放到了js里，图标都换成了svg也放到了js里。

由此可见，你也可以重写这些css，为他们添加不同的颜色。

没有什么巧妙的设计，也没有什么精致的构思，朴实无华的一百多行代码而已，希望这些代码可以帮到各位。

安装和使用

使用也非常简单，只需引入 两个文件 一个文件。

安装

npm i autolog.js

#### 引入css（引入一次即可）

在js中引入

在css中引入

v2.0.0以上无需引入css

使用

import aotolog from "autolog.js";

autolog.log("Hi，this is a normal tip");
autolog.log("Hello World", "success", 2500);
// 其中 "success" 和 2500 都是可选项

Github Link：github.com/LarryZhu-de…

NPM Link：www.npmjs.com/package/aut…

效果图

在线体验：larryzhu-dev.github.io/autoLarryPa…

以上就是关于autolog.js：一个小而美的toast插件。相关的全部内容，希望对你有帮助。欢迎持续关注程序员导航网，学习愉快哦！