Quasar

목표Input, Date, Select의 placeholder 스타일을 통일하고자 했다. (박스 가운데, 회색 글씨)그러나 q-select의 경우 q-input과 달리 placeholder 속성이 존재하지 않는다. 대신 label이 placeholder의 역할을 대신하고 있지만, 조금 다르게 동작한다.placeholder는 사용자가 입력을 시작하면 숨겨짐label은 사용자가 선택을 시작하면 상단으로 이동함  q-select에서 placeholder를 사용하고 싶다면 use-input prop을 사용하면 되지만, selectBox에 사용자 입력을 받지 않을거라면 사용하지 않는 편이 좋다. 다만 use-input만 단일로 사용하게 되면 다음과 같이 input과 select가 따로 노는 상황이 발생하기 때문에..

목적현재 개발 중인 서비스에는 날짜 입력 Input이 굉장히 많다.그렇기 때문에 공통 컴포넌트를 생성하여 반복적인 코드를 줄이고 스타일 통일성을 가져가려 했다.    필요 기능우선 내가 만들려고 하는 CommonDate 컴포넌트에 필요한 기능은 다음과 같다.Date Picker사용자 직접 입력YYYY-MM-DD 형식의 날짜 포매팅날짜 유효성 검사선택 불가능한 날짜 disable 처리  개발구조quasar의 공식 문서를 참고하여 구조를 가져갔다.   Date Picker 한국어 적용quasar의 기본 Date Picker의 경우 요일이나 월 표시가 전부 영어로 되어있다.이 상태 그대로 우리 서비스에 적용하기에는 이질감이 크다고 생각해 한글로 바꾸었다.이때 사용할 것은 q-date의 loc..

목표 ▪️ q-select의 options를 input 입력을 통해 API로 조회하기 ▪️ API 요청 횟수를 줄이기 위해 요청에 debounce 처리하기 ▪️ 한국어 입력 시 단어 파괴 또는 오류가 없도록 하기 구현 1. 사용자 입력 허용 use-input hide-selected fill-input 위의 세 가지 속성을 추가해줘야 한다. 각각의 역할은 ▪️ use-input : 사용자 입력 허용 ▪️ hide-selected : 옵션에서 값을 선택하면 input 값과 selected된 값이 모두 필드에 보여지게 된다. 그때 선택된 값을 숨겨 하나만 나타나게 한다. ▪️ fill-input : hide-selected 속성과 함께 쓰인다. 입력한 값을 필드에 보여지게 한다. ※ fill-input 속성..

mask를 사용할 때 QInput의 커서가 끝으로 이동하는 문제는 이미 quasar 버전 2.7에서 fix가 됐다. 근데 난 왜...? 내 코드에서는 QInput을 가지고 공통 컴포넌트를 만들었고, emits 이벤트를 통해 store의 값을 업데이트하다보니 계속해서 이런 오류가 반복되는 것 같다. 기존에는 vue 컴포넌트에 있는 데이터와의 연결을 위해 computed를 이용해 변수를 재정의해서 사용했다. const inputValue = computed({ get: () => { return props.value; }, set: (value) => { emits('update:inputBoxValue', value); }, }); 일단 computed를 더 이상 사용할 수 없다는 생각이 들어 get 부분..

q-input의 mask를 잘만 이용하면 정규표현식 등을 사용하지 않고도 입력 데이터 값의 포매팅을 진행할 수 있다. Input | Quasar Framework The QInput Vue component is used to capture text input from the user. quasar.dev 내가 하고 싶었던 숫자 포매팅은 2가지 숫자 세자리마다 콤마 입력되는 숫자의 길이가 정해지지 않고 가변적임 소수점 2자리 표기 최초에 0으로 자리 채워주기 → 0.00 그래서 부가적으로 mask와 관련된 옵션들을 추가해주었다. unmasked-value : 포매팅한 값과는 상관없이 raw value를 보존(사용) reverse-fill-mask : input 값의 길이가 고정적이지 않을 때 fill-m..

Input | Quasar FrameworkThe QInput Vue component is used to capture text input from the user.quasar.dev Quasar의 컴포넌트들은 굉장히 다양한 옵션과 메서드, 이벤트 등을 제공하기 때문에 프로젝트에서 유용하게 사용하고 있다. 그러던 중 Input의 입력 값에 대한 유효성 검사를 강하게 해야 할 필요가 있어 validate 메서드에 대해 더 깊이 알아보게 됐다. validate 란? validate 메서드가 하는 일은 말 그대로 유효성 검사를 실행시키는 것이다. 즉, 입력 값에 대한 유효성 검사를 수행하고 유효성 검사 결과에 따른 오류 메시지와 오류 표시를 적용한다. 그렇다면 validate는 어떻게 사용할까? valida..