Sweet Alert弹窗插件的安装及使用详解笔记

npm install sweetalert --save

import swal from 'sweetalert';

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

swal("Hello world!");

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

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

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

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

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

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

swal({
    title: "你确定吗?",
    text: "删除后，您将无法恢复这些文件！",
    icon: "warning",
    buttons: true,
    dangerMode: true,
})
    .then((willDelete) => {
        if (willDelete) {
            swal("您的文件已被删除!", {
                icon: "success",
            });
        } else {
            swal("您的文件是安全的!");
        }
    });

swal("你确定要这么做吗？", {
    buttons: ["取消", "确定"],
});

swal("你确定要这么做吗？", {
    buttons: ["取消", true],
});

swal("一个狂野的CXK出现了，你打算怎么做？", {
    buttons: {
        cancel: "逃跑!",
        catch: {
            text: "Pokéball!",
            value: "catch",
        },
        // defeat: true,
        defeat: {
            text: "打败他!",
            value: "defeat",
        },
    },
})
    .then((value) => {
        switch (value) {

            case "defeat":
                swal("CXK昏了过去！你获得了500 EXP！");
                break;

            case "catch":
                swal("真棒!", "CXK被抓住了!", "success");
                break;

            default:
                swal("安全离开！");
        }
    });

swal({
  text: '搜索一个电影，例如："La La Land"。',
  content: "input",
  button: {
    text: "搜索",
    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();
  }
});

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

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}`);
});

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>
)

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>
  )
})

swal({
  text: "Hello world!",
});

swal({
  title: "Here's a title!",
});

swal({
  icon: "success",
});

{
  text: "OK",
  value: true,
  visible: true,
  className: "",
  closeModal: true,
}

swal({
  button: "Coolio",
});

swal({
  button: {
    text: "Hey ho!",
  },
});

swal("Hello world!", {
  button: false,
});

{
  cancel: {
    text: "Cancel",
    value: null,
    visible: false,
    className: "",
    closeModal: true,
  },
  confirm: {
    text: "OK",
    value: true,
    visible: true,
    className: "",
    closeModal: true
  }
}

swal({  buttons: ["Stop", "Do it!"],});

swal({
  buttons: [true, "Do it!"],
});

swal("Hello world!", {
  buttons: false,
});

swal({
  buttons: {
    cancel: true,
    confirm: true,
  },
});

swal({
  buttons: {
    cancel: true,
    confirm: "Confirm",
    roll: {
      text: "Do a barrell roll!",
      value: "roll",
    },
  },
});

swal({
  content: "input",
});

swal({
  content: {
    element: "input",
    attributes: {
      placeholder: "Type your password",
      type: "password",
    },
  },
});

var slider = document.createElement("input");
slider.type = "range";
 
swal({
  content: slider,
});

swal("Hello world!", {
  className: "red-bg",
});

swal({
  closeOnClickOutside: false,
});

swal({
  closeOnEsc: false,
});

swal("Are you sure?", {
  dangerMode: true,
  buttons: true,
});

swal("This modal will disappear soon!", {
  buttons: false,
  timer: 3000,
});

.swal-overlay {
  background-color: rgba(43, 165, 137, 0.45);
}

.swal-modal {
  background-color: rgba(63,255,106,0.69);
  border: 3px solid white;
}

.swal-title {
  margin: 0px;
  font-size: 16px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.21);
  margin-bottom: 28px;
}

.swal-text {
  background-color: #FEFAE3;
  padding: 17px;
  border: 1px solid #F0E1A1;
  display: block;
  margin: 22px;
  text-align: center;
  color: #61534e;
}

.swal-footer {
  background-color: rgb(245, 248, 250);
  margin-top: 32px;
  border-top: 1px solid #E9EEF1;
  overflow: hidden;
}

.swal-button {
  padding: 7px 19px;
  border-radius: 2px;
  background-color: #4962B3;
  font-size: 12px;
  border: 1px solid #3e549a;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
}