KCustomAlert 使用教程

丁群曦Mildred

于 2024-09-03 08:55:49 发布

阅读量248

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00920/article/details/141845880

KCustomAlert 使用教程

KCustomAlertSimple and easy alerts to use instead of default AlertController. Separate Xib is provided to customize as pr your need. Callbacks are easily handled by using Closures.项目地址:https://gitcode.com/gh_mirrors/kc/KCustomAlert

项目介绍

KCustomAlert 是一个基于 JavaScript 的开源项目，旨在提供一个高度可定制的弹窗（Alert）解决方案。该项目利用 SweetAlert2 库来实现美观且功能丰富的弹窗效果，适用于各种 Web 应用场景。

项目快速启动

安装

首先，通过 npm 安装 KCustomAlert：

npm install kcustomalert

引入和初始化

在你的项目中引入 KCustomAlert 并进行初始化：

import KCustomAlert from 'kcustomalert';

// 初始化 KCustomAlert
const alert = new KCustomAlert();

// 显示一个简单的弹窗
alert.show({
  title: '提示',
  text: '这是一个简单的弹窗示例！',
  icon: 'info'
});

基本使用

以下是一个基本的弹窗示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>KCustomAlert 示例</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10">
</head>
<body>
  <button id="alertButton">显示弹窗</button>

  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
  <script>
    document.getElementById('alertButton').addEventListener('click', function() {
      Swal.fire({
        title: '提示',
        text: '这是一个简单的弹窗示例！',
        icon: 'info'
      });
    });
  </script>
</body>
</html>