앙큼한 개발기록

v-select https://vuetifyjs.com/en/components/selects/ vuetify를 쓰면서 selectbox를 변경하는게 가장 어려웠던거 같다... 아래의 코드를 global css 에 적용하고 높이와 색상을 조절하면 편리하다. .v-select { flex: none; // 기본 값이 1로 되어 있어서 width를 줘도 먹지 않을 수 있다. .v-input__control { height: 33px; // 내가 원하는 높이 width: inherit; .v-input__slot { min-height: initial !important; width: inherit; margin: 0; } .v-select__slot { height: 33px; // 내가 원하는 높이 .v-..

내가 사용한 프레임 워크 vuetify v-text-field https://vuetifyjs.com/en/components/text-fields/ Vuetify — A Vue Component Framework Use the persistent-placeholder prop to force the placeholder to be visible, even when the input is not focused. vuetifyjs.com 이번에 처음으로 vuetify를 써보면서 프레임워크에서 선언된 컴포넌트들의 스타일을 바꾸는데 애를 많이 먹었다. 많이 바꾸는 것도 아니고 높이 조절이나 폭 조절, 색상 변경 등과 같이 기본적인 부분을 바꾸는 것도 하나하나 확인 하면서 고치기가 여간 힘들어 정리해 보고자 한..

테이블을 사용하면서 고객이 칼럼의 크기를 자유롭게 조절해 달라고 요청이 들어왔다. 기존에 사용하던 테이블 태그를 버리고 div를 이용해서 테이블의 컬럼을 자유롭게 조절할 수 있도록 구현 한 내용을 정리해 보고자 한다. 인터넷에 검색하니까 잘 안나오더라.. 처음에는 테이블을 구현하고 css 를 이용해서 resize 속성을 넣어서 좌우로 마우스를 이용해 조절하게 해놓았다. 이름 ... .. 근데 vue에서 v-on:resize 로 이벤트를 받을 수 없어서 이것 저것 찾던 중 resize 될때마다 호출 되게 할수 있고 resize에 대한 이벤트를 받을 수 있는 라이브러리가 있어서 적용했다. 내가 적용한 라이브러리 :vue-element-resize-detector https://www.npmjs.com/pac..

사용한 템플릿 : nuxt library - xlsx - file-saver 예제 소스 코드: 출력 {{ value }} {{ product.index }} {{ product.name }} {{ product.price }}

프로젝트를 진행하면서 vue-select를 많이 사용하였는데 매번 쓸 때마다 공식문서 찾아가며 이리저리 검색하며 사용한 내용들을 정리하고자 글을 작성한다. 우선 , 나는 nuxt framework를 사용하였고 vue select는 plugin directory안에 library.js를 만들어 공통 컴포넌트로 만들고 그냥 호출해서 쓴다. (대부분의 외부 라이브러리는 해당 파일 안에 때려 박는다.) library.js import Vue from 'vue' import vSelect from 'vue-select' Vue.component('v-select', vSelect) nuxt.config.js ... plugins: [ {ssr: false, src: '@/plugins/mixins.js'}, {s..

온센 ui에서 다른것도 다 좋지만 회전 ui를 직접 커스텀 할 수 있다는게 최대의 장점이 아닐까 생각한다. vue에서 제공하는 다른 좋은 탬플릿도 많지만 내 입맛에 맞춰서 커스텀 하기에는 조금 힘든 면이 있다. 온센은 뭔가 다른 탬플릿 보다 커스텀하기가 쉽다. 그럼 우선 기본적인 사용방법과 응용 방법을 알아보자 기본 구조 carousel content carousel 안에 carousel-item을 넣어서 각각의 아이탬이 화면으로 작동 되어 스와이프 혹은 버튼 이벤트를 통해서 슬라이드 이동이 가능하다. 스타일을 직접 넣어서 사용되어 있지만 클래스를 줘서 덮어 씌울 수 도 있다. 홈페이지의 예제는 페이지 전체를 하지만 부분적으로 카드 모양 혹은 하나의 영역을 슬라이드로 바꿀 수 있다. 난 전체를 잡아먹는 ..

모바일 하이브리드 앱을 만들때 네이티브의 느낌을 물씬 풍기게 하기 위해서는 하단, 상단의 메뉴 탭바의 구현이 불가피 하다. 일일히 디바이스 height 맞춰주고 이미지 넣어주고 이벤트 구현 하는 귀찮음을 온센을 통해 해결 해 보자. 대략 이런 디자인 tabbar 의 구성은 tabbar 와 tab으로 구성된다. 기본적으로 홈페이지에 나와있는 사용 방법은 배열을 만들어 해당 배열을 탭바 태그 안에 넣어서 애니메이션이랑 이벤트 넣고 스타일 정하는 방법이다. label에 택스트 이름이 나오고 page에 해당 페이지 이동, props는 해당 페이지 안의 data 전달 혹은 상속 되겠다. 사실 네비게이션과 동일하게 해당 탭 바 안에 각각 페이지를 집어 넣어서 화면만 전환하는 느낌이 되겠다. 배열 안에 넣으면 왠지 ..

하이브리드 앱을 만드는 경우 가장 귀찮은 일은 페이지 전환 애니메이션이 아닐까 생각한다. 그 가장 귀찮은 일을 엄청 편하게 구현해 준다. props로 돔 지저분해 질 없고 데이터 상속도 간단하고 심지어 모듈화 시키기도 편하다. 기본적인 사용방법은 다음과 같다. 그치만 태그에 직접 쓰는 것 보다 데이터에 정의 하는게 더 좋다. ... export default { ... data() { return { pages: [...], options: { ... }, ... } } methods: { pagePrePush() { ... } } } 왜냐 하면 나중에 페이지에 따라서 애니메이션 다르게 주거나 이벤트 주거나 혹은 데이터 전달 할 때 데이터에 있어야 접근이 가능하고 변수를 재 사용 할 수 있기 때문이다. ..

화면의 페이지 단위에서 가장 최 상단에 필수로 위치하는 태그로 모든 화면에 기본적으로 들어간다. 페이지를 전환하는 방법은 navigation, carousel, segment, toolbar가 있으며 onsen ui 홈페이지의 api 종류 항목중 오늘은 page에 정의된 내용을 다룰 예정이다. 기본적인 사용 방법 Content goes here vue page 단위 혹은 nuxt page 폴더 안에 정의된 vue 파일, component에서의 페이지 단위는 모두 최상단에 [v-ons-page] 안에 들어 있어야 한다. 화면의 크기에 맞춰서 보여지는 부분을 맞춰 준다. 또한 onsen-ui에서 제공하는 강력한 네비게이션 기능을 사용하기 위해서 이다. 네비게이션은 나중에.... page 기능의 가장큰 특징은..