安装

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

npm install sweetalert --save

然后,只需将其导入您的应用程序:

import swal from 'sweetalert';

您还可以找到SweetAlert上unpkgjsDelivr 和使用全局 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();
  }
});

有时,您可能会遇到这样的场景,即使用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文件中)。

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