介绍
在前端开发过程中，经常需要使用弹出窗口提示用户信息。npm 包 new-toast 是一款轻量级的弹出提示插件，可以快速方便地在 web 开发中使用。
安装
安装 new-toast 可以直接使用 npm：
npm install new-toast
也可以使用 yarn：
yarn add new-toast
使用
引入
在需要使用 new-toast 的页面中，首先需要引入插件：
import Toast from 'new-toast';
创建实例
在页面加载完成后，创建 new-toast 实例：
const toast = new Toast();
显示提示
显示提示可以调用 toast 的 show 方法：
toast.show('这是一条提示');设置属性
new-toast 支持通过 set 方法设置多个属性：
toast.set({
duration: 3000,
position: 'bottom-center'
});- duration：提示显示时长，默认为 2000 毫秒。
- position：提示位置，默认为 'top-center'，可选值有 'top-left'，'top-right'，'top-center'，'bottom-left'，'bottom-right'，'bottom-center'。
事件监听
new-toast 提供了两个事件，分别为 show 和 hide，可以通过 on 方法监听：
toast.on('show', () => {
console.log('提示显示');
});
toast.on('hide', () => {
console.log('提示隐藏');
});自定义样式
可以通过 setStyle 方法自定义提示框的样式：
toast.setStyle('background-color: #007AFF;color: #fff;');示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------------- ----------
-------
------
------- --------------------
------- --------------------------
-------
--------- -------------------- ---- ------- ------ ----- ---- ------------ ----- ----- - --- -------- ----------- --------- ----- --------- --------------- --- -------------------------------------------------------- -- -- - ----------------- --------- --- ---------------- -- -- - -------------------- --- ---------------- -- -- - -------------------- --- --------------------------------- -------------- --------
总结
通过本教程，可以快速了解 new-toast 的使用方法和常用属性。在实际开发中，可以结合自身需求，自定义样式和事件，使提示框更加美观、实用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005559881e8991b448d2b94