inflearn logo
강의

Course

Instructor

Want to learn Vue.js properly? (A week before starting a Vue.js project)

Using external packages

SweetAlert2 관련 질문입니다.

692

jusanamsan33

14 asked

0

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

Answer 4

0

realprogrammers

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

0

jusanamsan33

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

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

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

0

jusanamsan33

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

0

realprogrammers

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

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

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

this.$swal();

google login 를 따라하다가 오류 발생

0

937

1

Expected indentation of 2 spaces but found 4 오류

0

874

1

카카오 로그인 에러가 뜨세요

0

434

1

Multi-word질문드립니다.

0

234

2

설치 이후 npm run serve 화면 안나옴

0

651

1

vue cli 문제

0

361

2

요청드립니다.

0

160

0

eslint 에러발생

0

1384

1

main.js 질문드립니다.

0

228

1

vuex-persistedstate 는 동작 자체를 안하네요?

0

371

1

15강.조회화면 저장실습 - params안됨

0

286

1

array 넘겨주기

0

164

0

유튜브 4시간 강의와는 어떤 차이가 있을까요?

0

286

1

prefetch기능

0

738

1

테이블 list 랜더링 되지 않습니다.

0

254

1

펑션을 한 depth 더 들어가면 $호출이 안되는 이유가 뭘까요?

0

288

2

name 값이 없는 경우 오류

0

209

1

vue config 파일 문의

0

346

1

실무 레벨에서 공통코드(기준정보)는 어떻게 구현 할까요?

0

327

1

강의자료가 따로 있나요?

0

362

1

computed 대신 직접 this.$store.state.user 사용은 안되나요?

0

171

0

lazy-load의 성능에 대해서 질문이 있습니다.

0

205

0

Prefetch 관련 질문 드립니다.

0

143

1

저는 왜 하나의 단어가 지정이 안될까요?

0

313

1