[Vue.js] 뷰에서 사용할 수 있는 alert 컴포넌트

https://sweetalert2.github.io/

SweetAlert2

 

 

사용법 : 

<script>
Swal.fire({
  title: `${name} 을 삭제 하시겠습니까?`,
  //html: `<span class="swal2-titile-custom">${name} <br>파일을 삭제 하시겠습니까?</span>`,
  type: 'warning',
  showCancelButton: true,
  confirmButtonText: '확인',
  cancelButtonText: '취소',
  showCloseButton: true,
  showLoaderOnConfirm: true,
}).then((result) => {
  if (result.value) { // confirmButtonText의 확인 클릭 시 true 반환
  	this.nextFunc(id, user_id, user_family_id);
  }
})

</script>

 

CSS : 

<style>
#swal2-title {
  color:#ddd;
}
</style>

 

Swal 의 title 옵션에 style을 사용시에는 #swal2-title 형식으로 접근

html 옵션은 직접 html 삽입 가능

vue 에서 <style> 과 <style scoped> 를 잘 구분해야 한다.