前言
在移动端开发中，弹窗信息展示是必不可少的。然而，原生实现比较繁琐，而且缺少统一的样式，难以满足开发效率和美观性的要求。为了解决这一问题，我们可以使用 @beisen-phoenix/mobile-toast 这个 npm 包。这个包可以提供基本的弹窗信息展示功能，并支持自定义主题和内容。
安装
@beisen-phoenix/mobile-toast 是 npm 包，安装非常简单，只需要在项目根目录下执行以下命令：
npm install @beisen-phoenix/mobile-toast
使用
引入
请在需要使用的组件中引入 @beisen-phoenix/mobile-toast ：
import mobileToast from '@beisen-phoenix/mobile-toast';
展示文本弹窗
展示文本弹窗非常简单，只需要使用以下代码：
mobileToast.showText('这是一段文本信息');自定义样式
毫无疑问，为了满足项目需要，我们需要自定义弹窗的样式。我们可以传入一个 options 对象，设置自定义样式：
mobileToast.showText('这是一段文本信息', {
background: '#ff9933',
fontColor: '#fff',
});@beisen-phoenix/mobile-toast 支持以下样式属性：
| 属性 | 含义 | 默认值 |
|---|---|---|
| background | 弹窗背景颜色 | #4c4c4c |
| fontColor | 弹窗文字颜色 | #fff |
| position | 弹窗位置(top/bottom) | bottom |
| displayTime | 弹窗展示时间，单位毫秒 | 2000 |
| fontSize | 弹窗字体大小，单位px | 16 |
| zIndex | 弹窗层级 | 999 |
| animation | 弹窗动画样式 | fade |
| animationDur | 弹窗动画时间，单位毫秒 | 300 |
例如，我们希望自定义背景颜色和字体颜色：
mobileToast.showText('这是一段文本信息', {
background: '#ff9933',
fontColor: '#fff',
});展示loading弹窗
有时我们需要展示 loading 弹窗以告知用户正在处理。这时我们可以使用以下代码：
mobileToast.showLoading('正在处理');隐藏弹窗
我们可以使用以下代码隐藏弹窗：
mobileToast.hide();
示例代码
-- -------------------- ---- ------- ------ ----------- ---- ------------------------------- -------------------------------- - ----------- ---------- ---------- ------- --- -------------------------------- ------------- -- - ------------------- -- ------
总结
@beisen-phoenix/mobile-toast 可以帮助我们快速实现移动端弹窗信息展示的功能，并支持自定义样式和内容。在实际开发中，我们可以根据项目需要进行相应的样式和内容定制，以及优化用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/135960