본문 바로가기

반응형

전체 글

(161)
넷파워-게임메카 잡지 2쪽보기, 기타 만화 2쪽보기 자주가서 보는 추억의 잡지를 보는편인데, 1쪽씩만 보다보니 불편해서 만들게 됐다. 작동방식은 즐겨찾기 url에 해당 소스를 한줄로 합쳐서 올리고, (소스는 하단에 codepen) 귀찮은 사람은 이거 그냥 복사 javascript: window.load = function () {var docV = document.documentElement;function openFullScreenMode() {if (docV.requestFullscreen) docV.requestFullscreen({navigationUI: "hide"});else if (docV.webkitRequestFullscreen) docV.webkitRequestFullscreen();else if (docV.mozRequestFullSc..
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; },
swiper라이브러리 활용/ 카드 형식 모바일, 터치기반 swiper 라이브러리 사용, gsap사용(안해도 큰차이 안남)
drag size horizontal 좌우 사이즈 조절 레이아웃
따라다니는 메뉴 See the Pen Vuetify dynamic follow bar by banisle (@banisle) on CodePen.
전체메뉴 샘플 일반적인 2depth 확장 형태 See the Pen vue 전체메뉴 by banisle (@banisle) on CodePen.

반응형