SweetAlert2  คือ Library ตัวหนึ่งสำหรับการสร้างหน้าต่างแจ้งเตือน บนเว็บไซต์ของเราได้อย่างง่ายดาย สวยงาม และปรับแต่งได้ รวมไปถึง Responsive และ UX/UI อีกด้วย 

โดยวันนี้เราจะมาทดลองใช้งาน SweetAlert2  ร่วมกับ Vue.js กันนะครับ โดยก่อนอื่นเราต้องมาดูที่วิธีติดตั้งกันก่อน ส่วนนี้ผมจะข้ามการติดตั้ง Vue.js ไปนะครับ ดูวิธีติดตั้ง Vue.js ได้ ที่นี่ 

การติดตั้ง (install)

npm install vue-sweetalert2

เปิดไฟล์ .src/main.js และทำการ เรียกใช้งาน SweetAlert2 แบบ global object

vue

// main.js
import Vue from 'vue';


// นำเข้า SweetAlert2  และ css
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

// เรียกใช้งาน SweetAlert2 
Vue.use(VueSweetalert2);

เปิดไฟล์ ที่ต้องการเรียกใช้งาน และเรียกใช้ด้วย this.$swal('');

<template>
    <button @click="showAlert">Hello world</button>
</template>

<script>
export default {
    methods: {
        showAlert() {
            // Use sweetalert2
            this.$swal('Hello world!!!');
        },
      },
};
</script>

การ config SweetAlert2 เพื่อแสดงผลตามที่เราต้องการ

ตัวอย่างที่ 1 แสดงผลแบบง่าย

 this.$swal.fire({
    icon: "Error", // icon ที่แสดง
    title: "Can't Deleted!", // title
    text: "Something wrong", // subtitle 
    confirmButtonColor: "colorCode", // สีปุ่ม confirm
    confirmButtonText: "Yes, deleted it!", // ตัวหนังสือในปุ่ม confirm
});

ตัวอย่างที่ 2 เพิ่ม HTML ใน SweetAlert2

 this.$swal.fire({
    icon: "Error", // icon ที่แสดง
    title: '<strong>Title</strong>', // ใส่ HTML ใน title หรือ subtitle ได้
    text: "Something wrong", // subtitle 
    confirmButtonColor: "colorCode", // สีปุ่ม confirm
    confirmButtonText: "Yes, deleted it!", // ตัวหนังสือในปุ่ม confirm
});

ตัวอย่างที่ 3 เพิ่ม image ใน SweetAlert2

 this.$swal.fire({
    title: 'Sweet!', // title
    text: 'Modal with a custom image.', // subtitle 
    imageUrl: 'https://unsplash.it/400/200', // รูปภาพ 
    imageWidth: 400, // ความกว้างของรูป 
    imageHeight: 200, // ความสูงของรูป 
    imageAlt: 'Custom image',  // alt ของรูปภาพs
});

ตัวอย่างที่ 4 เพิ่มเงื่อนไขเมื่อกดปุ่ม ยืนยัน

   this.$swal({
        title: "Are you sure?", // title
        text: "You won't deleted Blog!", // subtitle
        icon: "warning", // icon ที่แสดง
        showCancelButton: true, // แสดงปุ่ม Cancel
        confirmButtonColor: "colorCode", // สีปุ่ม confirm
        cancelButtonColor: "colorCode", // สีปุ่ม cancel
        confirmButtonText: "Yes, deleted it!",
    }).then((result) => {
          // เช็คว่ามีการกดปุ่ม confirm หรือไม่
        if (result.isConfirmed) {
          // เมื่อกดปุ่ม confirm จะเรียกใช้งาน code ในนี้
        }
      }
    });

นี่เป็นเพียงตัวอย่างเบื้องต้นของการใช้งาน SweetAlert2 หวังว่าบทความนี้จะเป็นประโยชน์แก่ผู้เยี่ยมชมนะครับ

อ่านเพิ่มเติมได้ที่ Docs: https://sweetalert2.github.io