Sweetalert: μ·¨μ†Œ λ²„νŠΌ λ™μž‘μ„ μ²˜λ¦¬ν•˜λŠ” 방법

에 λ§Œλ“  2017λ…„ 01μ›” 25일  Β·  7μ½”λ©˜νŠΈ  Β·  좜처: t4t5/sweetalert

확인 λ²„νŠΌμ— λŒ€ν•œ 콜백 λ§€κ°œλ³€μˆ˜κ°€ μžˆμ§€λ§Œ μ·¨μ†Œ λ²„νŠΌμ— λŒ€ν•œ μ½œλ°±μ„ μ–΄λ–»κ²Œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆκΉŒ?

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

λ¬Έμ„œμ—μ„œ 이 μž‘μ—…μ„ μˆ˜ν–‰ν•˜λŠ” λ°©λ²•μ˜ 예λ₯Ό 찾을 수 μžˆμŠ΅λ‹ˆλ‹€. http://t4t5.github.io/sweetalert/

"... λ§€κ°œλ³€μˆ˜λ₯Ό μ „λ‹¬ν•˜λ©΄ 'μ·¨μ†Œ'에 λŒ€ν•΄ λ‹€λ₯Έ μž‘μ—…μ„ μ‹€ν–‰ν•  수 μžˆμŠ΅λ‹ˆλ‹€."

swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  cancelButtonText: "No, cancel plx!",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  } else {
    swal("Cancelled", "Your imaginary file is safe :)", "error");
  }
});

λͺ¨λ“  7 λŒ“κΈ€

μ½”λ“œμ— doneFunction λ§€κ°œλ³€μˆ˜κ°€ μžˆμŠ΅λ‹ˆλ‹€.

이 μ½”λ“œλ₯Ό μ‹œλ„ν•˜κ³  μžˆμ§€λ§Œ λ‚΄ 콜백이 μ™„μ „νžˆ λ¬΄μ‹œλœ 것 κ°™μŠ΅λ‹ˆλ‹€. λ‚΄κ°€ 뭘 잘λͺ»ν•˜κ³  μžˆμŠ΅λ‹ˆκΉŒ?

(new Promise((resolve, reject) => {
  swal({
    title: "Delete data?",
    text: "Deleted data will be lost.",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Delete",
    closeOnConfirm: false,
    html: false,
    doneFunction(res) {
      if (res) {
        resolve();
      } else {
        reject();
      }
    }
  });
})).then(() => console.log("Resolved"), () => console.log("Rejected"))

μ €μ—κ²Œλ„ λ§ˆμ°¬κ°€μ§€μž…λ‹ˆλ‹€. λ‚΄ 콜백 ν•¨μˆ˜λŠ” 확인 λ²„νŠΌμ„ ν΄λ¦­ν•˜λ©΄ ν˜ΈμΆœλ˜μ§€λ§Œ μ·¨μ†Œ λ²„νŠΌμ€ ν˜ΈμΆœλ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

@jeffmath λ‚˜λŠ” 그것을 ν•΄κ²°ν•˜κΈ° μœ„ν•΄ https://github.com/limonte/sweetalert2 둜 μ „ν™˜ν–ˆμŠ΅λ‹ˆλ‹€.

λ¬Έμ„œμ—μ„œ 이 μž‘μ—…μ„ μˆ˜ν–‰ν•˜λŠ” λ°©λ²•μ˜ 예λ₯Ό 찾을 수 μžˆμŠ΅λ‹ˆλ‹€. http://t4t5.github.io/sweetalert/

"... λ§€κ°œλ³€μˆ˜λ₯Ό μ „λ‹¬ν•˜λ©΄ 'μ·¨μ†Œ'에 λŒ€ν•΄ λ‹€λ₯Έ μž‘μ—…μ„ μ‹€ν–‰ν•  수 μžˆμŠ΅λ‹ˆλ‹€."

swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  cancelButtonText: "No, cancel plx!",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  } else {
    swal("Cancelled", "Your imaginary file is safe :)", "error");
  }
});

@t4t5 isConfirm을 톡해 μ‚¬μš©μž 응닡이 확인 λ²„νŠΌμΈμ§€ μ•„λ‹ˆλ©΄ λ‹€λ₯Έ ν•­λͺ©μΈμ§€ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ ν΄λ¦­ν•œ λ²„νŠΌμ΄ "확인" λ²„νŠΌμΈμ§€ "μ·¨μ†Œ" λ²„νŠΌμΈμ§€ "λ‹«κΈ°" λ²„νŠΌμΈμ§€ ν™•μΈν•˜λŠ” 방법을 μ•Œλ €μ£Όμ‹€ 수 μžˆμŠ΅λ‹ˆκΉŒ? μ·¨μ†Œ λ²„νŠΌμ„ μ‚¬μš©ν•˜μ—¬ λ‹€λ₯Έ 곳으둜 λ¦¬λ””λ ‰μ…˜ν•˜μ§€λ§Œ λ‹«κΈ° λ²„νŠΌμ€ κ²½κ³ λ₯Ό 닫을 뿐이기 λ•Œλ¬Έμž…λ‹ˆλ‹€.

μ‹€μ œ λ¬Έμ œλŠ” sweetalert v1.xμ—μ„œ μ·¨μ†Œ μ²˜λ¦¬κΈ°κ°€ function( https://github.com/t4t5/sweetalert/blob/v1.1.3/lib/modules/handle-둜 μ‹œμž‘ν•˜λŠ” μ½œλ°±μ„ ν™•μΈν•œλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€.
λ”°λΌμ„œ ν•΄λ‹Ή 쑰건이 μΆ©μ‘±λ˜μ§€ μ•ŠμœΌλ©΄ @Zorgatone 의 μ˜ˆμ œμ—μ„œ doneFunction( ν•˜λ―€λ‘œ μ½œλ°±μ€ λ¬΄μ‹œλ©λ‹ˆλ‹€.

쒋은 캐치 @gualopezb. λ‚˜λŠ” 이것을 μ˜μ›νžˆ μž‘λ™ μ‹œμΌ°κ³  κ°‘μžκΈ° μž‘λ™μ„ λ©ˆμ·„μŠ΅λ‹ˆλ‹€.

λ₯΄ μˆ˜μ •:

-    }, (code) => {
+    }, function(code) {

λ‚΄ Babel ꡬ성에 μ•½κ°„μ˜ 변경이 μžˆλŠ” 것 κ°™μŠ΅λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰