DEV Community

jhomegroup
jhomegroup

Posted on • Updated on

Sweer Alert [TH] With Vuejs

npm i vue-sweetalert2
Enter fullscreen mode Exit fullscreen mode

main.js

import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

Vue.use(VueSweetalert2);
Enter fullscreen mode Exit fullscreen mode

Success

    this.$swal({
      position: "top",
      icon: "success",
      title: "บันทึกข้อมูลสำเร็จ!",
      showConfirmButton: false,
      timer: 1600,
    });
Enter fullscreen mode Exit fullscreen mode

AlertEditSuccess

    this.$swal({
      position: "top",
      icon: "success",
      title: "แก้ไขข้อมูลสำเร็จ!",
      showConfirmButton: false,
      timer: 1600,
    });
Enter fullscreen mode Exit fullscreen mode

AlertDeleteConfirm

    this.$swal({
      title: "คุณแน่ใจไหม?",
      text: "คุณจะลบรายการข้อมูลนี้ และไม่สามารถกู้คืนกลับได้!",
      icon: "warning",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "ใช่ลบ!",
      cancelButtonText: "ปิด",
    }).then((result) => {
      if (result.isConfirmed) {
        this.$swal("ลบแล้ว!", "รายการข้อมูลนี้ถูกลบแล้ว.", "success");
      }
    });
Enter fullscreen mode Exit fullscreen mode

AlertError

    this.$swal({
      position: "top",
      icon: "error",
      title: "เกิดข้อผิดพลาด! ไม่สามารถทำรายการได้",
      showConfirmButton: false,
      timer: 1600,
    });
Enter fullscreen mode Exit fullscreen mode

Top comments (0)