[Vue] Sweet Alert2 사용하기(Javascript)

alert, confirm, prompt 창도 지원하며 깔끔해서 맘에 들어서
주로 Toast 메시지 창으로 사용했습니다

 

---

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.10/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.10/dist/sweetalert2.min.js"></script>

index.html에 cdn으로 넣어서 사용했습니다

 

 

반응형

 

---

 

기본 Alert

Swal.fire({
  'Alert 실행!!.',  // Alert 제목
  'Alert 내용이 나타나는 곳.',  // 내용
  'success',  // icon
});

기본적으로 이런식으로 fire를 사용해서 alert창을 출력합니다.

 

---

Toast

비슷한 디자인의 Toast창을 여러개 만들거라서 alert.js라는 이름으로 파일을 따로 만들어서

export하고 필요한 곳에서 import해서 사용하는 방식으로 구현했습니다.

 

const Toast = Swal.mixin({
    toast: true,
    position: 'bottom',   // Toast창 위치
    showConfirmButton: false,
    timer: 2000,
    timerProgressBar: false,  // timer 시간동안 줄어드는
})

일단 Toast라는 이름으로 화면 아래쪽에 띄워지게 만들었습니다.

전체적으로 토스트 창을 이대로 만들고 안에 들어갈 내용만 바꿔서 사용하려고 합니다.

 

 

export function logoutToast(){
    Toast.fire({
        icon: 'info',
        title: '로그아웃 되었습니다.'
    })
}

그렇게 만든 Toast를 Toast.fire()를 icon과 title의 내용만 바꿔서 작성하는데
icon은 success, info, error, warning, question 등이 있습니다.

 

다른 컴포넌트에서 import해서 사용할거라 export합니다.

 

 

import {logoutToast} from '@/alert.js'

다른 컴포넌트에서 import로 불러와서 원하는 부분에 logoutToast()
이렇게 호출 해주면 됩니다.

 

---

Confirm

export const saveToast = Swal.mixin({
    showCloseButton: true,  // 닫기 버튼 보이기
    showConfirmButton: true,  // confirm 버튼 보이기
    showCancelButton: true,   // cancel 버튼 보이기
    confirmButtonColor: '#6e7881',  // confirm 버튼 색 지정
    cancelButtonColor: '#ff8633', // cancel 버튼 색 지정
    color: 'white', // 글자 색 지정
    background: '#2c2a35',  // Confirm창 배경 색 지정
})

Confirm창도 재사용 하기 위해 비슷한 디자인으로 만들고 export 했습니다.

 

 

 

saveToast.fire({
        icon: 'warning',
        html: '<p>저장하지 않고 페이지를 나가면</p>   //title과 text 대신 html도 사용가능하다
               <p>저장되지 않습니다.</p>',
        confirmButtonText: '저장하지 않고 나가기',
        cancelButtonText: '저장하고 나가기',
        
        
      }).then(result => {
        if (result.isConfirmed) { // 저장하지 않고 나가기 눌렀을 때
          /* code */
        } else if (result.dismiss == 'cancel') {  // 저장하고 나가기 눌렀을 떄
          /* code */
        }
        /* 닫기버튼 code */
      })

confirm 버튼과 cancel 버튼에 각각 코드를 작성해 다른 동작을 하게 만들고
닫기 버튼은 아무 동작안해야하니 작성하지 않았습니다.