목록Web /Vue js tip (49)
알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)
amcharts pathToImages 로컬 설정 amcharts 을 vue js 에 설치 하면 위와 같이 그림이 깨집니다. 그래서 보통 "pathToImages": "http://www.amcharts.com/lib/3/images/",을 설정해서 이미지를 다운로드 합니다. 하지만 amcharts 에 접속 하지 못할 경우에 문제가 되지 때문에 따로 다운 받을 방법을 찾아야 합니다. 저 같은 경우에는 node_modules/amcharts3/amcharts/images 폴더를 복사해서 webpack 의 static\img\amcharts 에 집어 넣습니다. "pathToImages": "/static/img/amcharts/images/", 그리고 나서 경로를 다음과 같이 하고 나면 이미지가 정상적으로 ..
amchart vuejs webpack npm 사용 하기 amchart 를 사용 하는데 vue js와 연동 하는데 있어서 https://www.amcharts.com/kbase/using-amcharts-vue-js-webpack/ 에 자세히 나와 있지만 틀린 부분이 있어서 글을 적습니다. npm install amcharts/amcharts3 --save (x)이 아니라 npm install amcharts3 --save로 설치를 해주세요 그리고 에서 chart 로 사용하기 위한 요소 인데요 create() 에서 사용하지 않고 mounted 나 methods 에서 사용 할것이기 때문에 ref를 붙혀 줍니다.import AmCharts from 'amcharts3' import AmSerial from ..
webpack build -> css 적용 안되는 증상 webpack 에서 npm run dev 할때는 css 가 잘 적용 되다가 몇몇 속성 들이 build 후에 적용 이안되는 증상들이 보입니다. 그럴때는 !important 을 사용해 주세면 build 후에도 잘 적용 되어 있습니다. .multiselect--active { z-index: 3 !important; }.tabledelbtn{ height: 5px !important; line-height: 5px !important;}.search_input{ height: 50px !important;}
vue-js-modal 프로그램을 개발하다 보면 위와 같은 인터페이스가 필요할 때가 있습니다. 설치 방법은 Installnpm install vue-js-modal --save 그 다음에 main.js 에 import VModal from 'vue-js-modal'Vue.use(VModal, { dynamic: true }) 을 추가해 주면 됩니다. 데모사이트 = http://vue-js-modal.yev.io/ 데모 사이트에 여러가지 데모가 있지만 그중에 제일 자유도가 높게 UI 를 구성할수 있는 CustomComponentModal 을 알아 보도록 하겠습니다. 참고한 소스는 https://github.com/euvl/vue-js-modal/tree/master/demo/client_side_rende..
Handsontable 한글 패치 방법 handontable 을 사용하다 보면 영문으로 나오는 부분이 있습니다. 그래서 한국어를 직접 작성하여 패치 하고자 하여 handontable 의 문서중 https://docs.handsontable.com/i18n/missing-language-code 의 예제를 보고 github 에서 handontable 을 소스 를 받아서 npm install 을 하고 메뉴얼 있는데로 ................... 등의 작업을 하고 npm install build:language 로 컴파일 까지 완료 하였고 메뉴얼에 있는데로 import Handsontable from 'handsontable'; import 'handsontable/languages/ko-KR'; 을 ..
web pdf viewer 간단 예제 웹에서 간단히 pdf viewer 를 설치 하는 방법 입니다. 필자는 서버는 tomcat8 버전으로 사용 했습니다. 위에 예제가 가장 직관적으로 잘 설명 하여 첨부 하였습니다.
아래 코드를 추가해 줍니다. # 위의 명시된 날짜 이후가 되면 페이지가 캐싱되지 않습니다. (따라서 위와 같은 날짜로 지정할 경우 페이지는 지속적으로 캐싱되지 않습니다.) # 캐시된 페이지가 만료되어 삭제되는 시간을 정의합니다. 특별한 경우가 아니면 -1로 설정합니다. # 페이지 로드시마다 페이지를 캐싱하지 않습니다. (HTTP 1.0) # 페이지 로드시마다 페이지를 캐싱하지 않습니다. (HTTP 1.1)
handsontable cell-renderers 예제 추천 사이트 https://handsontable.com/blog/articles/getting-started-with-cell-renderers 예제로 배우기 좋은 사이트라서 올립니다.
Handsontable renderers 사용시 undefind 에러 대처 Handsontable 에서 http://jsfiddle.net/api/post/library/pure/ 와 같이 사용 하는데 vue js 에서 columns: [ {data : 'part'}, {data : 'machine_name'}, {data : 'process'}, {data : 'online_object',type: 'checkbox'}, {data : 'online_available',type: 'checkbox'}, {data : 'buy', renderer : this.greenrend, type: 'date', dateFormat: 'YYYY-MM-DD', defaultDate: '1900-01-01', date..