前言
最近需要做一个关于自动解析矢量瓦片链接地址的内部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。
js部分（共37行）
js
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 方法，而调用此方法，也只需要必填一个参数。
我来讲一下这段代码干了一件什么事
- 因为有两个可选参数，所以第一步判断一下传了哪个可选参数，这可以在使用时，只传time或者type。
- 获取主容器，getMainElement 方法返回一个主容器，若主容器不存在，就创建它，这省去了用户手动创建主容器的过程，一般的插件会导出一个 init 方法初始化，这一步可以省去 init 操作。
- 创建一个 span 标签用于展示 log 内容。
- 两个定时器，第一个在清除元素的前 0.5 秒为其添加退场动画，第二个清除元素，el = null 可以保证断开引用，防止产生游离dom，防止内存泄漏。
最重要的在于css部分，css承载了最重要的显示逻辑。
css部分（共100行）
css
@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、颜色。
没有什么巧妙的设计，也没有什么精致的构思，朴实无华的一百多行代码而已，希望这些代码可以帮到各位。
安装和使用
使用也非常简单，只需引入两个文件。
安装
shell
npm i autofit.js引入css（引入一次即可）
在js中引入
js
import 'autolog.js/autolog.css'在css中引入
css
@import url('autolog.js/autolog.css');使用
js
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...
效果图
