vue2

Input 안에 버튼 넣어 이쁘게 만들기

오늘은~ input 창안에 버튼을 넣어 이쁘게 보이게 하려고합니다! Vue를 이용해 제작하고 있습니다. 많은 헤딩끝에 원하는 디자인대로 만들어 낸 과정을 작성합니다! 급하신분들은 맨 밑 '최종_최종최최종 코드'를 확인해주세요~! 1차 시도 처음엔 input창안에 button을 넣어서 원하는 디자인을 만들려고 했습니다. //첫 코드 input 안에 button을 넣으려면 한번 감싸줘야합니다. 저는 label을 사용해 감싸줬습니다. label{ position:relative } button{ position:absolute left:7px; top: 4px; } 이렇게 작성 해주고 input창 그림자도 넣어주고 사이즈도 맞춰서 각종 브라우저에 테스트를 해보았는데 이상하게 버튼이 가운데에 있지않았습니다.(두..

[Vue 2] vuetify icon custom 하기

Vuetify가 기본적으로 제공하는 metarial Icon에 없는 경우 사용하기위해서 Img를 사용할 수도 있고, 아이콘을 등록 할수도 있는데, 처음 내가 사용한 방법은 v-if와, v-else로 다른게 클릭되면 색이있는 이미지가 변경되게끔 설정해 줬었다. 하지만 코드의 가독성, 효율성이 조금 떨어진다는 생각이 들어 :class 를 이용해 클릭이 되었을때 아이콘의 색이 변경되게끔 설정을 해주기도 했는데 이것 또한 가독성이 떨어진다는 느낌을 받았었다. 그래서 vuetify에 custom icon을 등록하는 부분을 검색해 보았고 엄청난 헤딩 끝에 해내게 되었는데 이 방법을 적으려고 한다! 처음에는 vuetify에 기술 되어있는 custom icon 부분을 이용해서 해보려고했는데 잘 된것 같다가도 계속해서 ..

[Vue 2] vuetify v-date-picker custom 하기

개발을 진행하다 보니, 달력을 만들어야 할 날이 왔다. 개발 라이브러리로 vuetify를 사용하는데 vuetify에서 제공하는 달력은 두 종류가 있다. 하나는 달력만을 보여주는 date-picker, 캘린더의 역활을 하는 calnder, 두 종류고 캘린더까진 필요하지 않아서 date-picker을 사용했다. custom 하기가 어려웠지만 어떠한 방식으로 해냈고, 어떻게 헤딩을 했는지 써보려고 한다! https://vuetifyjs.com/en/api/v-date-picker/ 1. date-picker한글 셋팅 하기 vuetify에서 제공하는 locale이라는 속성에 KO를 넣어주면 한글 버전을 사용할 수 있지만 날짜 옆에 '일'도 함께 나와서 이걸 해결해야만 했었다. 그러던 중 이것에 관련하여 포스팅하..

[Vue 2] Instance Properties 추가하기(전역 속성 추가하기)

vue로 개발을 하면서 조금 더 깔끔하게 코드를 쓰는 법에 대해 많이 고민하고 있는데 그 중에 자주 쓰는 값 같은 경우 데이터 사전으로 정리하는 것이 편하고, 확장성도 좋다 라는 말을 멋진 지인이 알려줘서 초반 앱과 다르게 두번째 개발 앱부터는 데이터를 사전 형식으로 정리하고 그것을 전역 속성으로 셋팅해줘서 모든 파일에서 사용할수 있도록 하려고한다. 우선 나같은 경우는 components/common 안에 dict이라는 폴더를 하나 만들고 그안에 데이터 사전을 정리하려고 한다. (맞는 방법인지는 잘 모르겠지만..) components/common/dict안에 UserType.js라는 파일을 만들고 export const userType = { hyejin: { code: 0, kor_name: '혜진',..