安装

NPM结合Browserify 或 Webpack等工具是安装SweetAlert的推荐方法。

npm install sweetalert --save

然后，只需将其导入您的应用程序：

import swal from 'sweetalert';

您还可以找到SweetAlert上unpkg 和 jsDelivr 和使用全局 swal 变量.

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

入门

将文件导入应用程序后，您可以调用该swal 函数 (确保在DOM加载后调用它！)

swal("Hello world!");

如果传递两个参数，第一个将是模态的标题，第二个是文本。

swal("Here's the title!", "...and here's the text!");

使用第三个参数，您可以在警报中添加一个图标！有4分预定义的: "warning", "error", "success" 和 "info".

swal("Good job!", "You clicked the button!", "success");

也可以使用对象作为唯一参数来重写最后一个示例：

swal({
  title: "Good job!",
  text: "You clicked the button!",
  icon: "success",
});

使用此格式，我们可以指定更多选项来自定义警报。例如，我们可以将确认按钮上的文本更改为"Aww yiss!":

swal({
  title: "Good job!",
  text: "You clicked the button!",
  icon: "success",
  button: "Aww yiss!",
});

您甚至可以将第一种语法与第二种语法结合起来，这可能会为您节省一些输入：

swal("Good job!", "You clicked the button!", "success", {
  button: "Aww yiss!",
});

有关所有可用选项的完整列表，请查看API 文档!

SweetAlert 使用 promises来跟踪用户如何与警报交互。

如果用户单击确认按钮，则承诺将解析为true。如果警报被解除（通过在其外部单击），则承诺将解析为null.

swal("Click on either the button or outside the modal.")
.then((value) => {
  swal(`The returned value is: ${value}`);
});

如果您想在执行危险操作之前警告用户，这会派上用场。通过设置更多选项，我们可以更好地提醒我们：

swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("Poof! Your imaginary file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
});

高级示例

我们已经看到了如何使用确认按钮设置文本 button: "Aww yiss!".

如果我们还想显示和自定义取消按钮，我们可以设置buttons 为一个字符串数组，其中第一个值是取消按钮的文本，第二个值是确认按钮的文本：

swal("Are you sure you want to do this?", {
  buttons: ["Oh noez!", "Aww yiss!"],
});

如果您希望其中一个按钮只有默认文本，则可以将值设置为true而不是字符串：

swal("Are you sure you want to do this?", {
  buttons: ["Oh noez!", true],
});

那么，如果你需要更多的不仅仅是一个取消和确认按钮？别担心，SweetAlert让你满意！

通过为其指定对象buttons，您可以根据需要设置完全相同的按钮，并指定它们在单击时解析的值！

在下面的示例中，我们设置了3个按钮：

swal("A wild Pikachu appeared! What do you want to do?", {
  buttons: {
    cancel: "Run away!",
    catch: {
      text: "Throw Pokéball!",
      value: "catch",
    },
    defeat: true,
  },
})
.then((value) => {
  switch (value) {
 
    case "defeat":
      swal("Pikachu fainted! You gained 500 XP!");
      break;
 
    case "catch":
      swal("Gotcha!", "Pikachu was caught!", "success");
      break;
 
    default:
      swal("Got away safely!");
  }
});

您可以查看文档中的所有可用按钮选项。

于SweetAlert是基于承诺的，因此将它与基于承诺的AJAX函数配对是有意义的。以下是fetch用于在iTunes API上搜索艺术家的示例。请注意，我们正在使用content: "input"以便在用户单击确认按钮时显示输入字段并检索其值：

swal({
  text: 'Search for a movie. e.g. "La La Land".',
  content: "input",
  button: {
    text: "Search!",
    closeModal: false,
  },
})
.then(name => {
  if (!name) throw null;
 
  return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`);
})
.then(results => {
  return results.json();
})
.then(json => {
  const movie = json.results[0];
 
  if (!movie) {
    return swal("No movie was found!");
  }
 
  const name = movie.trackName;
  const imageURL = movie.artworkUrl100;
 
  swal({
    title: "Top result:",
    text: name,
    icon: imageURL,
  });
})
.catch(err => {
  if (err) {
    swal("Oh noes!", "The AJAX request failed!", "error");
  } else {
    swal.stopLoading();
    swal.close();
  }
});

使用DOM节点作为内容

有时，您可能会遇到这样的场景，即使用SweetAlert提供的开箱即用功能会更好，但是使用一些自定义UI不仅仅是样式按钮和文本。为此，有content选择权。

在前面的示例中，我们看到了如何设置content 为在模态中"input" 获取 <input />元素，该元素根据其值更改确认按钮的已解析值。"input"是为了方便而存在的预定义选项，但您也可以设置content为任何DOM节点！

让我们看看我们如何重新创建以下模态的功能......

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

...使用自定义DOM节点！

我们将在这里使用React ，因为它是一个众所周知的UI库，可以帮助我们理解如何创建更复杂的SweetAlert接口，但是您可以使用任何所需的库，只要您可以从中提取DOM节点！

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
 
const DEFAULT_INPUT_TEXT = "";
 
class MyInput extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      text: DEFAULT_INPUT_TEXT,
    };
  }
 
  changeText(e) {
    let text = e.target.value;
 
    this.setState({
      text,
    });
 
    /*
     * This will update the value that the confirm
     * button resolves to:
     */
    swal.setActionValue(text);
  }
 
  render() {
    return (
      <input
        value={this.state.text}
        onChange={this.changeText.bind(this)}
      />
    )
  }
}
 
// We want to retrieve MyInput as a pure DOM node: 
let wrapper = document.createElement('div');
ReactDOM.render(<MyInput />, wrapper);
let el = wrapper.firstChild;
 
swal({
  text: "Write something here:",
  content: el,
  buttons: {
    confirm: {
      /*
       * We need to initialize the value of the button to
       * an empty string instead of "true":
       */
      value: DEFAULT_INPUT_TEXT,
    },
  },
})
.then((value) => {
  swal(`You typed: ${value}`);
});

这看起来可能看起来非常复杂，但实际上非常简单。我们所做的只是创建一个输入标记作为React组件。然后，我们提取其DOM节点并将其传递到swal 函数的 content选项下，以将其呈现为无样式元素。

唯一特定于SweetAlert的代码是最后swal.setActionValue() 的 swal()调用。其余的只是基本的React和JavaScript。

Facebook modal
使用这种技术，我们可以创建具有更多交互式UI的模态，例如来自Facebook的这种模式。

使用库

虽然上面介绍的用于创建更高级模态设计的方法可行，但手动创建嵌套DOM节点变得非常繁琐。这就是为什么我们也可以使用SweetAlert Transformer轻松将您喜爱的模板库集成到SweetAlert中。

为了将SweetAlert与JSX语法一起使用，您需要SweetAlert with React安装sweetalert 和 @sweetalert/with-react依赖关系package.json.

那之后，这很容易。每当你想在SweetAlert模态中使用JSX时，只需从而@sweetalert/with-react 安装 sweetalert.

import React from 'react'
import swal from '@sweetalert/with-react'
 
swal(
  <div>
    <h1>Hello world!</h1>
    <p>
      This is now rendered with JSX!
    </p>
  </div>
)

JSX语法取代了modal的content选项，因此您仍然可以使用SweetAlert的所有其他功能。以下是您如何实现我们之前看到的Facebook模式：

import React from 'react'
import swal from '@sweetalert/with-react'
 
const onPick = value => {
  swal("Thanks for your rating!", `You rated us ${value}/3`, "success")
}
 
const MoodButton = ({ rating, onClick }) => (
  <button 
    data-rating={rating}
    className="mood-btn" 
    onClick={() => onClick(rating)}
  />
)
 
swal({
  text: "How was your experience getting help with this issue?",
  buttons: {
    cancel: "Close",
  },
  content: (
    <div>
      <MoodButton 
        rating={1} 
        onClick={onPick}
      />
      <MoodButton 
        rating={2} 
        onClick={onPick}
      />
      <MoodButton 
        rating={3} 
        onClick={onPick}
      />
    </div>
  )
})

从1.X升级

SweetAlert 2.0引入了一些重要的重大变化，以使库更易于使用和更灵活。

最重要的变化是不推荐使用回调函数来支持promises，并且您不再需要导入任何外部CSS文件（因为样式现在捆绑在.js文件中）。

以下是一些其他已弃用的选项及其替代品：