介紹

sweetalert2是一個響應式、可客製化的替代JS原生的彈出視窗套件。sweetalert2比sweetalert更強大但它不是sweetalert的擴展，它是一個全新的插件，支持三大前端框架。

官網

---

事不宜遲，馬上來看看它的效果吧。

(此範例使用react框架)

安裝

開一個專案，在終端機安裝套件。

使用yarn：

$ yarn add sweetalert2 sweetalert2-react-content

使用方法

在專案上方引入，就可以做使用囉

$ import Swal from 'sweetalert2';

---

範例

下面有幾顆可愛的按鈕們，可以把他丟到程式內看看~~

import Swal from 'sweetalert2';

export default function Sweet() {

    let timerInterval;

    const inputValue = 87
    const inputStep = 0.01
    return (
        <div>
            <button style={{ backgroundColor: "#729EA1", color: "#FFF", fontSize: "20px", width: "200px", height: "50px", border: "none", borderRadius: "6px", margin: "10px" }} onClick={() => {
                Swal.fire({
                    title: '哈囉你好嗎',
                    allowOutsideClick: () => {
                        const popup = Swal.getPopup()
                        popup.classList.remove('swal2-show')
                        setTimeout(() => {
                            popup.classList.add('animate__animated', 'animate__headShake')
                        })
                        setTimeout(() => {
                            popup.classList.remove('animate__animated', 'animate__headShake')
                        }, 500)
                        return false
                    }
                })
            }}>
                按我，快
            </button>
            <button style={{ backgroundColor: "#729EA1", color: "#FFF", fontSize: "20px", width: "200px", height: "50px", border: "none", borderRadius: "6px", margin: "10px" }} onClick={() => {
                Swal.fire({
                    title: '你的生命剩下10秒啦',
                    html:
                        '生命終結倒數 <strong></strong> 秒<br/><br/>' +
                        '<button id="increase" class="btn btn-warning">' +
                        '再給我5秒' +
                        '</button><br/><br/>' +
                        '<button id="stop" class="btn btn-danger">' +
                        '暫停!!' +
                        '</button><br/><br/>' +
                        '<button id="resume" class="btn btn-success" disabled>' +
                        '嗯..你可以開始了' +
                        '</button><br/><br/>' +
                        '<button id="toggle" class="btn btn-primary">' +
                        '換一下' +
                        '</button>',
                    timer: 10000,
                    didOpen: () => {
                        const content = Swal.getHtmlContainer()
                        const $ = content.querySelector.bind(content)

                        const stop = $('#stop')
                        const resume = $('#resume')
                        const toggle = $('#toggle')
                        const increase = $('#increase')

                        Swal.showLoading()

                        function toggleButtons() {
                            stop.disabled = !Swal.isTimerRunning()
                            resume.disabled = Swal.isTimerRunning()
                        }

                        stop.addEventListener('click', () => {
                            Swal.stopTimer()
                            toggleButtons()
                        })

                        resume.addEventListener('click', () => {
                            Swal.resumeTimer()
                            toggleButtons()
                        })

                        toggle.addEventListener('click', () => {
                            Swal.toggleTimer()
                            toggleButtons()
                        })

                        increase.addEventListener('click', () => {
                            Swal.increaseTimer(5000)
                        })

                        timerInterval = setInterval(() => {
                            Swal.getHtmlContainer().querySelector('strong')
                                .textContent = (Swal.getTimerLeft() / 1000)
                                    .toFixed(0)
                        }, 100)
                    },
                    willClose: () => {
                        clearInterval(timerInterval)
                    }
                })
            }}>
                按慢一點別害怕
            </button>
            <button style={{ backgroundColor: "#729EA1", color: "#FFF", fontSize: "20px", width: "200px", height: "50px", border: "none", borderRadius: "6px", margin: "10px" }} onClick={() => {
                Swal.fire({
                    title: '餘生(單位為秒)',
                    html: `
                        <input
                        type="number"
                        value="${inputValue}"
                        step="${inputStep}"
                        class="swal2-input"
                        id="range-value">`,
                    input: 'range',
                    inputValue,
                    inputAttributes: {
                        min: 0,
                        max: 1000,
                        step: inputStep
                    },
                    didOpen: () => {
                        const inputRange = Swal.getInput()
                        const inputNumber = Swal.getHtmlContainer().querySelector('#range-value')

                        // remove default output
                        inputRange.nextElementSibling.style.display = 'none'
                        inputRange.style.width = '100%'

                        // sync input[type=number] with input[type=range]
                        inputRange.addEventListener('input', () => {
                            inputNumber.value = inputRange.value
                        })

                        // sync input[type=range] with input[type=number]
                        inputNumber.addEventListener('change', () => {
                            inputRange.value = inputNumber.value
                        })
                    }
                })
            }}>
                按我：D
            </button>
        </div>
    );
}

---

其他套件分享—Swiper

Swiper 顧名思義就是滑動，使用目標就是借助這個套件的神力來做到滑動的需求。可以用在輪播圖，或是需要滾動的選項上的套件。

官網

---

安裝

使用yarn

$ yarn add swiper

---

使用方法

他的使用方法比較麻煩，需要引入他的css檔

import React from "react";
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, FreeMode } from "swiper";
import "swiper/css";
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import 'swiper/css/scrollbar';
import "swiper/css/free-mode";

---

範例

這邊有基本的Swiper範例，可以看看他滑動的效果

import React from "react";
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, FreeMode } from "swiper";
import "swiper/css";
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import 'swiper/css/scrollbar';
import "swiper/css/free-mode";

export default function Guruguru() {
    return (
        <Swiper
            slidesPerView={3}
            spaceBetween={30}
            freeMode={true}
            pagination={{
                clickable: true,
            }}
            modules={[FreeMode, Pagination]}
            className="mySwiper"
            style={{ width: '100%', height: '100px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}
        >
            <SwiperSlide>哈囉</SwiperSlide>
            <SwiperSlide>你好</SwiperSlide>
            <SwiperSlide>嗎</SwiperSlide>
            <SwiperSlide>~</SwiperSlide>
            <SwiperSlide>衷心</SwiperSlide>
            <SwiperSlide>感謝</SwiperSlide>
            <SwiperSlide>~</SwiperSlide>
            <SwiperSlide>珍重</SwiperSlide>
            <SwiperSlide>再見</SwiperSlide>
            <SwiperSlide>~</SwiperSlide>
        </Swiper>
    );
};

---