SweetAlert2 관련 질문입니다.

Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)

외부 패키지 사용하기

작성

526

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! 
- 먼저 유사한 질문이 있었는지 검색해보세요. 
- 서로 예의를 지키며 존중하는 문화를 만들어가요. 
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요!

저는 아래의 SweetAlert을 사용하고 싶은데, 여러번 시도해 보았지만 방법을 모르겠습니다.

Custom animation with Animate.css 

Try it on CodePen

CSS

body { font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; }

JS

Swal.fire({
  title: 'Custom animation with Animate.css',
  showClass: {
    popup: 'animate__animated animate__fadeInDown'
  },
  hideClass: {
    popup: 'animate__animated animate__fadeOutUp'
  }
})

vuejs vuex

답변 4

개발자의 품격

지식공유자

ShowClass, hideClass 사용하지 마시고, sweetalert2 기본 예제 보시고 용도에 맞게 사용해 보세요

jusanamsan33

질문자

강사님 말씀대로 하였으나, 오히려 더 정적인 SweetAlert창이 나왔습니다.

혹시 제가 잘 못한 곳을 알 수 있을까요?

methods: {
saveUserInfo () {
if (this.name === '') {
return this.$swal({
title: '사용자 이름을 입력하세요.',
showClass: {
popup: 'animate__animated animate__fadeInDown'
},
hideClass: {
popup: 'animate__animated animate__fadeOutUp'
}
})
}

jusanamsan33

질문자

이렇게나 빨리 상담해주시다니, 대단히 감사합니다!! __()__

개발자의 품격

지식공유자

main.js 파일에 다음과 같이 vue용 sweetalert2를 추가하세요

import VueSweetalert2 from 'vue-sweetalert2'

import 'sweetalert2/dist/sweetalert2.min.css'
app.use(VueSweetalert2)

그리고 실제 사용하는 곳에서는 아래와 같이 this.$swal 로 사용하셔야 합니다.

this.$swal();

인프런 커뮤니티 질문&답변

SweetAlert2 관련 질문입니다.