-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
SweetAlert2 관련 질문입니다.
21.08.25 10:26 작성 조회수 384
0
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 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'
}
})
답변을 작성해보세요.
0
0
jusanamsan33
질문자2021.08.26
강사님 말씀대로 하였으나, 오히려 더 정적인 SweetAlert창이 나왔습니다.
혹시 제가 잘 못한 곳을 알 수 있을까요?
methods: {
saveUserInfo () {
if (this.name === '') {
return this.$swal({
title: '사용자 이름을 입력하세요.',
showClass: {
popup: 'animate__animated animate__fadeInDown'
},
hideClass: {
popup: 'animate__animated animate__fadeOutUp'
}
})
}
0
0
개발자의 품격
지식공유자2021.08.25
main.js 파일에 다음과 같이 vue용 sweetalert2를 추가하세요
import VueSweetalert2 from 'vue-sweetalert2'
import 'sweetalert2/dist/sweetalert2.min.css'
app.use(VueSweetalert2)
그리고 실제 사용하는 곳에서는 아래와 같이 this.$swal 로 사용하셔야 합니다.
this.$swal();
답변 4