vue.js/vue.js 라이브러리
[vue.js] vue2-datepicker 캘린더 주(week) 단위 선택 및 style 설정하기
서론 프로젝트에서 캘린더를 주(week)단위로 선택 해야하는 기능 요청이 있어서 적용하게 되었다. 설치 캘린더 라이브러리는 많지만 vue2-datepicker 라이브러리를 사용했다. npm i vue2-datepicker 소스 선택한 주 : {{ dateRange.start }} ~ {{ dateRange.end }} 설명 data weekTime : datepicker에서 주고받을 데이터 dateRange : 주 단위 시작 / 종료 날짜 데이터 datepickerLang : 캘린더에서 사용할 lang ex) datepickerLang: { yearFormat: "YYYY년", monthFormat: "M월", } method getClasses : 선택한 영역에 class를 적용하기 위한 메소드로 현재..
[vue.js] 엑셀(excel) 다운 기능 sheetjs 라이브러리 설치 및 사용 예제
서론 프론트에서 엑셀 다운로드를 해야할 일이 있어서 가장 많이 쓰이는 라이브러리 sheetJs를 정리할 예정입니다. 설치 npm i xlsx 소스 vue async excelDown() { const xlsx = require('xlsx'); // 엑셀 파일 생성 const book = xlsx.utils.book_new(); // data get > 실 개발시 api 호출 const fruitDataByAoa = await this.getFruitDataByAoa(); const fruitDataByJson = await this.getFruitDataByJson(); // sheet 생성 - aoa_to_sheet 방식 const worksheetByAoa = xlsx.utils.aoa_to_shee..
[vue.js] vue-awesome-swiper 라이브러리 설치 및 사용 예제
서론 구글링해도 vue.js 에서 swiper를 사용하는 내용이 별로 없어서 작성해봅니다. 설치 npm i swiper@5.3.7 npm i vue-awesome-swiper swiper는 6버전 문제가 있어서 5.3.7 버전으로 설치하였습니다. 해당 이슈는 github.com/surmon-china/vue-awesome-swiper/issues/684 로 가면 볼수있다. 소스 vue * 해당 소스는 github.com/surmon-china/surmon-china.github.io/blob/source/projects/vue-awesome-swiper/examples/20-infinite-loop.vue 에서 ex 소스를 사용하였다. Slide 1 Slide 2 Slide 3 Slide 4 Slide ..