[vue] SweetAlert2 사용하기. (Utils Class 만들어서 사용하기)

 

 

설치

npm install sweetalert2

 

사용

<script setup>
// 생략

import Swal from 'sweetalert2'

// 생략

const Toast = Swal.mixin({
  toast: true,
  position: 'top-end',
  showConfirmButton: false,
  timer: 3000,
  timerProgressBar: true,
  didOpen: (toast) => {
    toast.addEventListener('mouseenter', Swal.stopTimer)
    toast.addEventListener('mouseleave', Swal.resumeTimer)
  }
})

Toast.fire({
  icon: 'error',
  title: 'The current password is incorrect'
})

</script>

결과는 아래와 같이 나옵니다.

Toast.fire({ icon: 'error', title: 'The current password is incorrect' })

여기에서 icon 에 들어갈 수 있는 것은 아래와 같습니다.

 

예제 코드

Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

 

---

 

Util Class 만들기

 

alertUtils.js 와 같이 적당한 이름으로 파일을 하나 만듭니다.

import Swal from 'sweetalert2'

SingleTon 으로 생성하기 위해서 

const AlertUtil = {
    instance: null,
    getInstance() {
        if (!this.instance)
            this.instance = new _AlertUtil();

        return this.instance;
    }
}

이렇게 AlertUtil 을 만들고 

_AlertUtil class 를 한번만 생성하도록 합니다.

_AlertUtil class 는 아래와 같이 생성합니다.

class _AlertUtil{
    constructor() {
        this.toastTopEnd = this._getToast()
    }
    
    successSnackBar(message){
        this.toastTopEnd.fire({
            icon: 'success',
            title: message
        })
    }

    errorSnackBar(message){
        this.toastTopEnd.fire({
            icon: 'error',
            title: message
        })
    }

    _getToast(position= "top-end", timer = 3000){
        return Swal.mixin({
            toast: true,
            position: position,
            showConfirmButton: false,
            timer: timer,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        })
    }
}

여기에 필요한 기능들을 계속 추가해 가면 되겠네요.

 

그리고 export 는 다음과 같이 합니다.

export default {AlertUtil}

여기까지가 alertUtils.js 내용입니다.

 

사용하기

<script setup>

import alertUtils from 'alertUtils파일의경로'

// 아래와 같이 사용해도 되고
alertUtils.AlertUtil.getInstance().successSnackBar('Password updated successfully')

// 너무 길다면 변수로 받아와서 사용
const myAlert = alertUtils.AlertUtil.getInstance()
myAlert.successSnackBar('Password updated successfully')