sweetalert

最新推荐文章于 2024-08-15 09:16:49 发布

易天海

最新推荐文章于 2024-08-15 09:16:49 发布

阅读量2.3k

点赞数

分类专栏：前端

前端专栏收录该内容

116 篇文章 1 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

SweetAlert是一个美观的JavaScript插件，用于替换传统的alert对话框。它提供了丰富的功能和优雅的设计，包括错误消息、警告提示、输入框等交互。用户可以方便地安装、使用，并查看详细的文档和示例进行应用。此外，该项目欢迎社区贡献，有明确的贡献指南。

摘要由CSDN通过智能技术生成

sweetalert是什么

什么是sweetalert，SweetAlert 是一个 JavaScript 插件，能够完美替代 JavaScript 自带的 alert 弹出框，并且功能强大、设计优美。

sweetalert官网：官网
sweetalert文档：文档
sweetalert源码仓库：源码仓库
sweetalert下载地址：点此下载点此下载2

sweetalert介绍

A beautiful replacement for JavaScript’s “alert”

Installation

$ npm install --save sweetalert

Usage

import swal from 'sweetalert'

swal("Hello world!")

Upgrading from 1.X

Many improvements and breaking changes have been introduced in the 2.0 release. Make sure you read the upgrade guide to avoid nasty suprises!

Guides

Documentation

Examples

An error message:

swal("Oops!", "Something went wrong!", "error")

A warning message, with a function attached to the confirm message:

swal({
  title: "Are you sure?",
  text: "Are you sure that you want to leave this page?",
  icon: "warning",
  dangerMode: true,
})
.then(willDelete => {
  if (willDelete) {
    swal("Deleted!", "Your imaginary file has been deleted!", "success");
  }
});

const willDelete = await swal({
  title: "Are you sure?",
  text: "Are you sure that you want to delete this file?",
  icon: "warning",
  dangerMode: true,
})

if (willDelete) {
  swal("Deleted!", "Your imaginary file has been deleted!", "success");
}

A prompt modal, where the user’s input is logged:

swal("Type something:", {
  content: "input",
})
.then((value) => {
  swal(`You typed: ${value}`);
})

const value = await swal("Type something:", {
  content: "input",
})

swal(`You typed: ${value}`);

In combination with Fetch:

swal({
  text: 'Wanna log some information about Bulbasaur?',
  button: {
    text: "Search!",
    closeModal: false,
  },
})
.then(willSearch => {
  if (willSearch) {
    return fetch(`http://pokeapi.co/api/v2/pokemon/1`)
  }
})
.then(result => result.json())
.then(json => console.log(json))
.catch(err => {
  swal("Oops!", "Seems like we couldn't fetch the info", "error")
})

const willSearch = await swal({
  text: 'Wanna log some information about Bulbasaur?',
  button: {
    text: "Search!",
    closeModal: false,
  },
})

if (willSearch) {
  try {
    const result = await fetch(`http://pokeapi.co/api/v2/pokemon/1`)
    const json = await result.json()
    console.log(json)
  } catch (err) {
    swal("Oops!", "Seems like we couldn't fetch the info", "error")
  }
}