轻量级移动端弹窗组件-使用纯JavaScript实现的Toast、Alert和Confirm

本文介绍了一款专为移动设备设计的轻量级弹窗组件，它支持Toast、Alert和Confirm三种弹窗样式，全部使用原生Javascript实现，无需引入任何外部库或CSS文件，仅包含一个JS文件。

该组件采用了单例模式设计，确保在任何时候只有一个弹窗处于打开状态，如果尝试打开新的弹窗，会自动关闭当前已打开的弹窗。

1. Toast组件

Toast组件用于显示短暂的消息提示，如加载状态等。

let toast = new ToastClass();

主要方法：

• show(options)：显示Toast弹窗。
• hide()：隐藏Toast弹窗。

可用选项：

• text（String）：显示的文本，默认为“正在加载”。
• loading（Boolean）：是否显示加载图标，默认为false。
• duration（Number）：Toast显示的持续时间（毫秒），默认不自动消失。
• onShow（Function）：Toast显示时的回调函数。
• onHide（Function）：Toast隐藏时的回调函数。

示例代码：

toast.show({
  text: '正在加载',
  duration: 2000,
  onShow: function() {
    console.log('Toast已显示');
  }
});

toast.hide(); // 手动关闭Toast

2. Alert组件

Alert组件用于显示带有确认按钮的警告信息。

let alert = new AlertClass();

主要方法：

• show(options)：显示Alert弹窗。
• hide()：隐藏Alert弹窗。

可用选项：

• title（String）：弹窗标题，可选。
• content（String）：弹窗内容，必填。
• btnText（String）：按钮文本，默认为“确定”。
• onShow（Function）：弹窗显示时的回调函数。
• onHide（Function）：弹窗隐藏时的回调函数。

示例代码：

alert.show({
  title: '提示标题',
  content: '提示内容',
  onShow: function() {
    console.log('Alert已显示');
  }
});

alert.hide(); // 手动关闭Alert

3. Confirm组件

Confirm组件用于显示带有多个按钮的选择对话框。

let cOnfirm= new ConfirmClass();

主要方法：

• show(options)：显示Confirm弹窗。
• hide()：隐藏Confirm弹窗。

可用选项：

• title（String）：弹窗标题，可选。
• content（String）：弹窗内容，必填。
• btns（Array）：按钮配置数组，默认包含“确定”和“取消”两个按钮。
• onShow（Function）：弹窗显示时的回调函数。
• onHide（Function）：弹窗隐藏时的回调函数。

按钮配置项：

• text（String）：按钮文本，默认分别为“确定”和“取消”。
• class（String）：按钮的CSS类，默认分别为“confirm”和“cancel”。
• callback（Function）：按钮点击后的回调函数。

示例代码：

confirm.show({
  title: '提示标题',
  content: '提示内容',
  btns: [
    {
      callback: function(instance) {
        instance.close = false;
        console.log('点击了确定按钮，但不会关闭弹窗');
      }
    },
    {
      text: '不需要',
      callback: function() {
        console.log('点击了不需要按钮');
      }
    }
  ],
  onShow: function() {
    console.log('Confirm已显示');
  }
});

confirm.hide(); // 手动关闭Confirm