Javascript 검색 결과
13 개의 검색 결과가 있습니다.
Javascript

Clipboard API 정리 (readText, writeText)

사용자가 복사기능을 사용할 때 추가데이터가 필요한 경우가 있다. (출처나 시간값.. 등) Clipboard API 는 지원영역이 IE11 과 IE11 이 아닌 브라우저로 나뉜다. IE11 은 window.clipboardData 를 사용. 그 외 브라우저는 navigator.clipboard 사용 navigator.clipboard browser compatibility 1. 브라우저 체크 (IE11 or another browser) var isIE = false || !!document.documentMode; IE11 에서는 true chrome, edge, firefox 에서는 false 를 반환한다. 2. 브라우저 별 Clipboard API 사용 IE11 // Get Clipboard Data..

2021. 2. 25. 17:56
Javascript/Vue.js

table data 가 너무 길 경우 해결방법 (table over-flow text in cell)

table data 가 너무 길어서 생각했던 디자인과 달라지는 케이스가 발생할 수 있다. 해결하려고 방법을 찾아보고 정리해보았다. 1. CSS 로 조정 max-width: 200px; overflow: hidden; text-overflow: ellipsis; 디자인에 맞게 td 의 크기를 제한하고 overflow: hidden 옵션으로 max-width 를 벗어나는 내용을 숨긴다. text-overflow: ellipsis; 옵션을 추가하면 끝에 잘리는 부분을 ... 으로 표시해준다. 2. td 안의 내용을 일부만 표현 {{result.message}} {{result.message.substring(0,40)+"...."}} v-if else 구문을 이용해서 원하는 만큼의 내용만 표시한다. 실 적용에..

2021. 2. 4. 10:00
Javascript/Vue.js

Vue.js Progress Circle 추천 및 사용법정리 (easy-circular-progress)

Vue.js 에서 Progress Circle 을 사용할 일이 생겨 라이브러리를 찾아보았다. 심플하고 라이센스문제가 없는 라이브러리중 easy-circular-progress 가 눈에 띄었다. demo download 사용법은 download 링크에 깃헙을 참고하면 쉽게 따라할 수 있다. 1. 의존성 모듈 Install npm install easy-circular-progress --save 2. Script 블록에 import 및 컴포넌트 등록 2-1. 예제 css 적용 (생략가능) 3. template 블록에서 컴포넌트 호출해서 사용하기 hello 컴포넌트를 사용할 때 prop 을 이용하여 커스텀이 가능하다. strokeColors : 색상 default is "#aaff00" strokeWidth..

2020. 12. 17. 16:15
Javascript/Vue.js

vue router-link 사용법 정리(Navigation menu)

vue 에서는 vue router 로 라우팅을 하며 a tag 를 대체하는 router-link 가 존재한다. router-link 의 장점을 알아보자. 출처 : router.vuejs.org/kr/api/#router-link router-link 는 prop 을 활용해서 쓰면된다. to 를 이용해서 url 을 전달하면 해당 url 로 이동할 수 있다. 기본적으로 router-link 를 사용하면 a tag 로 치환되며 tag prop 을 이용하면 다른 tag 로 변경해서 사용할수도 있다. a tag 의 특성상 밑줄이 생기는데 router-link 에서 밑줄제거는 css 를 이용하면 해결할 수 있다. .logo{ text-decoration: none; } 두 가지 prop 만 알아도 기본기능은 활용할..

2020. 12. 11. 09:39
Javascript/Vue.js

vue 2.x버전 flatpickr 문제 Missing required prop: "value" found in FlatPickr

환경 vue 2.6.12 vue-cli 4.5.9 해당 환경을 기준으로 flatpickr 의존성을 설치하려면 아래와 같은 화면을 보게될 것이다. 9.0.2 버전을 선택하고 기본 예제를 실행해봤으나 실패. 개발자분이 vue 2버전대에서는 vue-flatpickr-component 8버전대를 사용하라고 한다. 9.0.2 버전을 삭제하고 8.1.7 버전을 설치 설치 후 기본 예제를 실행해봤으나 실패. npm 에서 설치시도. 설치버전이 8.1.6 인것을 확인. 기본예제 실행성공. 현재 8.1.6 이상은 지원하지 않는 듯하다..

2020. 12. 8. 18:02
Javascript/Vue.js

vue router URL 에서 "#" 제거하기 (hashbang)

vue router 는 이름대로 vue 에서 router 를 담당하고 있다. vue-cli 에서 vue-router 를 설치하면 기본적으로 src/router/index.js 파일이 생성되며 세팅이 완료된다. Home.vue 와 About.vue 로 이동하는 router 설정이 되어있으며 해당 설정과 같은 syntax 로 원하는 페이지를 등록해주면 된다. import TopMenu from '../components/TopMenu.vue' const route = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', // route level code-splitting // this generates a separ..

2020. 12. 7. 17:02