NPM을 사용하여 SweetAlert2를 Laravel로 가져오기

SweetAlert2는 사용자 친화적인 경고를 위한 훌륭한 패키지로, 일반적으로 스크립트 태그를 추가하여 설치한 다음 패키지를 정상적으로 사용합니다. 이 게시물은 대신 Laravel에서 NPM으로 설치하는 방법을 설명합니다.

먼저 터미널에서 Laravel 프로젝트를 열고 다음을 추가하십시오.

npm install sweetalert2

그러면 다음과 같은 패키지가 package.json에 설치됩니다.

"dependencies": {
    "sweetalert2": "^10.15.5"
}

다음으로 SweetAlert2를 *resources/js/app.js *로 가져와야 합니다.

현재 파일에서 패키지를 사용할 수 있도록 가져오기

import swal from 'sweetalert2';

SweetAlert2를 전역적으로 사용하려면 창 개체에 추가할 수 있습니다.

window.Swal = swal;

그런 다음 app.js 또는 블레이드 파일에서 직접 사용할 수 있습니다.

이제 다음을 실행하여 변경 사항을 app.js로 컴파일해야 합니다.

npm run dev

블레이드 파일에서 SweetAlert2 사용

블레이드 파일에서 사용하려면 SweetAlert2를 사용하려고 시도하기 전에 콘텐츠가 로드되었는지 확인해야 합니다. 그렇지 않으면 오류가 발생합니다. 이를 위해 콘텐츠가 준비되었을 때만 실행되는 DOMContentLoaded라는 이벤트 리스너를 추가할 수 있습니다.

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
   //content goes here
});
</script>

다음은 확인 알림의 예입니다.

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
   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'
        )
      }
    })
});
</script>