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部分（共37行）

const autolog = {
log(text, type = "log", time = 2500) {
if (typeof type === "number") {

      time = type;

      type = "log";

    }
let mainEl = getMainElement();
let el = document.createElement("span");

    el.className = `autolog-${type}`;

    el.innerHTML = 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);

  }
return mainEl;

}
export default autolog;

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

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

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

css部分（共100行）

@font-face {
font-family: "iconfont"; /* Project id 4507845 */
src: url("//at.alicdn.com/t/c/font_4507845_4ys40xqhy9u.woff2?t=1713154951707")
format("woff2"),
url("//at.alicdn.com/t/c/font_4507845_4ys40xqhy9u.woff?t=1713154951707")
format("woff"),
url("//at.alicdn.com/t/c/font_4507845_4ys40xqhy9u.ttf?t=1713154951707")
format("truetype");

}
#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;
height: max-content;
background-color: #fafafa;
color: #333;
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}
#autolog span::before {
padding-right: 4px;

}
#autolog span.autolog-warn,
#autolog span.autolog-warning {
background-color: #fffaec;
color: #e29505;

}
#autolog span.autolog-warn::before,
#autolog span.autolog-warning::before {
content: "\e682";

}
#autolog span.autolog-error {
background-color: #fde7e7;
color: #d93025;

}
#autolog span.autolog-error::before {
content: "\e66f";

}
#autolog span.autolog-info {
background-color: #e6f7ff;
color: #0e6eb8;

}
#autolog span.autolog-info::before {
content: "\e668";

}
#autolog span.autolog-success,
#autolog span.autolog-ok,
#autolog span.autolog-done {
background-color: #e9f7e7;
color: #1a9e2c;

}
#autolog span.autolog-success::before,
#autolog span.autolog-ok::before,
#autolog span.autolog-done::before {
content: "\e67f";

}
#autolog span.hide {
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
height: 0;
padding: 0;
margin: 0;

}
@keyframes fadein {
0% {
opacity: 0;
transform: translateY(-10px);

  }
100% {
opacity: 1;
transform: translateY(0);

  }

}

css部分正正好好 100 行代码，从上到下分别是：iconfont 字体图标链接、主容器样式、各类型提示框的样式、退场类，入场动画。

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

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

安装和使用

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

安装

npm i autolog.js

引入css（引入一次即可）

在js中引入

import 'autolog.js/autolog.css'

在css中引入

@import url('autolog.js/autolog.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：http://www.npmjs.com/package/aut…

效果图

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