DEV Community

jhomegroup
jhomegroup

Posted on • Edited on

1

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

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more