2. 做一个极简 UI 库之Toast 组件

效果

API 设计

先设计好了 API 写起来代码才不会犯迷糊

Toast(message: string; otherParams?: ToastParams): ToastReturn

interface ToastParams {time?: number;appendTo?: string | HTMLElement;dangerouslyUseHTMLString?: boolean;
}

interface ToastReturn {close():void
} 

ToastParams 详解

属性	说明	类型	默认值
time	Toast 存在的时长, 单位秒, -1 代表永不消失	number	2
appendTo	将 Toast 放到那个 dom 下	string 或 HTMLElement	document.body
dangerouslyUseHTMLString	是否将 message 解析为 html 片段	boolean	false

ToastReturn 详解

属性	说明	类型	默认值
close	关闭 Toast	Function	–

难点说明

先说一下实现一个居中的 Toast 提示的基本思路:

div {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);
} 
<