본문 바로가기
728x90
반응형

vuejs6

[vuejs] Dropzone vue3로 파일 드래그앱드롭 업로드 구현하기 Vue3에서 파일 업로드를 쉽게 구현할 수 있는 Vue3-Dropzone 라이브러리의 사용법 이 라이브러리를 사용하면 사용자들이 파일을 마우스로 드래그하여 업로드할 수 있는 기능을 간편하게 구현 가능합니다 1. 설치 및 환경 설정 Vue3-Dropzone을 사용하려면 먼저 프로젝트에 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다. npm install vue3-dropzone 2. 설치가 완료되면, 사용할 Vue 컴포넌트에 import import { useDropzone } from "vue3-dropzone"; 3. 템플릿 구현 // HTML 템플릿 파일을 마우스로 끌어 추가해주세요 4. Vue3-Dropzone 사용 export default { created() { function .. 2023. 4. 17.
[vuejs] base64 첨부파일 새 탭으로 미리보기 기능 base64 첨부파일 새 탭 (새창)으로 미리보기 기능 × previewFile(id){ var fileInfo = this.dataObj.fileIds.find(v=>v.id === id); //파일 배열 const fileExtension = fileInfo.fileName.split(".")[1].toLowerCase(); //확장자 //공통기능 호출 this.$previewFile(fileExtension, fileInfo.base64); }, app.config.globalProperties.$previewFile = (fileExtension, b64Data) => { const imageExtensions = ["png", "jpg", "jpeg", "gif", "bmp", "webp", ".. 2023. 3. 24.
[vuejs] daterangepicker 새로고침 해야 나오는 현상, 페이지 이동시 작동 안됨 오류 common.js에 DataRangePicker에 대한 옵션이 적용되어있으나 해당페이지에서는 작동하지 않고, 새로고침해야 작동되는 오류가 있음, 원인은 js파일을 로드하지 못하는것으로 추측되는데, mounted에 DataRangePicker를 로드하도록 했지만 Uncaught TypeError: $(...).datepicker is not a function 오류가 발생 해결방법 daterangepicker npm 설치 후 전역에서 사용 할 수 있도록 별도 처리 1. common.js 기존 데이트픽커 init 부분을 vue로 가지고 오고 중복되지 않게 주석처리 **** vue mounted로 이동, 주석처리함 $(function() { var start = moment().subtract(29, 'day.. 2023. 3. 22.
[vuejs] json 객체로 테이블 동적 생성하기(체크박스 모두 선택 제어) 체크박스 테이블 동적 생성하기 - JSON 객체 형태로 data 셋팅하기 export default{ data() { return { allChecked: false, categories: [ { label: "depth1", key: "depth1", depth: 1, checked: false, menus: [ { label: "A1", key: "A1", checked: false, depth: 2, disabled: true }, { label: "A2", key: "A2", checked: false, depth: 2, disabled: false }, { label: "A3", key: "A3", checked: false, depth: 2, disabled: false }, { label: .. 2023. 3. 21.
728x90
반응형

티스토리툴바