본문 바로가기

반응형

vuetify

(4)
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.

반응형