profile
FE 개발 기록들을 정리해 놓은 이솝개발일지입니다.
post-thumbnail

#2 vuex 로 전역 modal 만들기

UserStory. 서비스 어디에서나 열고 닫을 수 있는 모달 ex) 어느 메뉴 어느 게시판에서나 열 수 있는 내용 상세보기 modal화면 vuex사용하기 state에 전역 변수 지정한다. state값을 변경하기 위한 mutations에 method를 정의한다. state에 저장된 변수를 해당 modal에 적용한다. ... /vuex/index.vue .../index.vue ... /compoenet/modal.vue

2022년 5월 12일
·
0개의 댓글
·
post-thumbnail

#1 모달 외부 클릭하여 닫기

UserStory 쉽게 모달을 열고 닫을 수 있다. ex) 구글 메인페이지 google apps 목록 펼쳐보기 모달 외부 클릭하여 닫기 위한 필수조건 보여줄 모달에 v-if를 사용해 toggle 가능하도록 변수를 셋팅하여야 한다. 모달의 tabindex 라는 요소를 -1로 설정되어야 한다. focus()를 위한 요소의 ref값이 설정되어야 한다. 실행 순서 모달의 v-if 변수 값을 true로 설정 해 준다. 해당 모달의 ref를 사용하여 focus()를 설정해준다. blur가 될 경우, close()메소드를 실행한다.

2022년 5월 12일
·
0개의 댓글
·