Vue (6) 썸네일형 리스트형 Vue 윈도우 팝업사용 및 store 적용하기 Vue프로젝트에서 원칙적으로는 팝업사용을 안하는게 맞지만, 대부분의 프로젝트를 하다보면 으레그렇듯이 고객의 요구에 따라 window.popup을 사용하게 되는경우가 있다. 문제는 vuex등으로 store를 사용해서 데이터를 전달해야 되는데 window.popup을 호출한 창은 별도의 뷰 인스턴스로 인식이 되서 store에 저장된 값을 활용을 못한다. 해서 우리의 알고리즘을 통해 찾은 방법을 공유한다. 1. 우선 팝업창을 띄우는 방법부터 1. POP.VUE를 만든다. 2. 위에서 만든 POP.VUE를 라우터에 등록한다. { path: "/POP", name: "POPUP", component: () => import("@/views/page/POP"), }, 3. 특정 버튼에 아래와 같이 팝업창을 호출한다.. Vuetify data-picker range custom #2022.11.28 css스타일로 대충 range형태로 바꿔보기는 했다. codepen 수정 #2022.11.29 라이브러리 형태의 range와 큰 차이없이 구현해놨다. 안까봐서 내부는 다르겠지만, css좀 활용해서 비슷하게 결과는 나와있다. 그래도 새로 한다거나, 라이브러리 사용에 제한이 있는 상황이 아니라면 라이브러리 쓰는게 편할듯 vuetify의 v-data-picker를 활용해서 일반적으로 사용하는 시작달력과 종료달력 형식으로 표현하려고 했으나, 그냥 라이브러리 잘된거 쓰는편이 낫다, 새로 라이브러리 까는게 귀찮으면 대충 사용하는거고 좋은거 : https://www.vuescript.com/calendar-datepicker-functional/ Modern Calendar And Datepic.. vuetify v-data-table expanded row 변형: 버튼 이벤트 추가 기존 vuetify의 v-data-table의 expand속성 사용시 show-expand속성을 빼고 해당 row클릭시 expand항목이 열리게 하는 방식으로 수정 추가: 그리드내에 버튼을 추가할 경우, 기존 @click:row이벤트와 겹쳐서 이벤트 중복이 일어날 경우 @click.stop="btnTest" 이런식으로 이벤트를 주면 중복이 일어나지 않는다. See the Pen Vuetify Example Pen by banisle (@banisle) on CodePen. vuetify picker한글 달력 기본 가 제공하는 캘린더보다, 일반적인 달력느낌이라서 사용중인데, locale속성을 단순히 ko-KR 한글로 바꾸면 아래와 같이, "dd일" 형식으로 보여져서 :day-format속성에 krGetDay 라는 메소드를 만들고 :day-format속성에 krGetDay 라는 메소드를 만들어 적용하면 krGetDay (date) { const day = date.split("-")[2]; const day_num = Number(day); return day_num; }, 따라다니는 메뉴 See the Pen Vuetify dynamic follow bar by banisle (@banisle) on CodePen. 전체메뉴 샘플 일반적인 2depth 확장 형태 See the Pen vue 전체메뉴 by banisle (@banisle) on CodePen. 이전 1 다음
