[Vue.js] (Vuetify) 커스텀 Time Picker 컴포넌트 만들기
Vuetify의 v-text-field와 v-time-picker, v-dialog를 활용하여 text field를 클릭하면 time picker를 띄우고, 사용자가 시간을 입력하면 텍스트 인풋에 그 값이 들어가도록 하는 커스텀 컴포넌트를 만들어본다. # TimePicker.vue Cancel OK allowed-minutes는 특정 함수를 전달해주면 time picker의 시간 단위를 제한할 수 있다. (위 처럼 적용하면 5분 단위만 선택 가능) 해당 컴포넌트에서 받은 time 상태를 emit을 통해 상위 컴포넌트로 넘겨주면 다른곳에서 text field 값을 사용할 수 있다.
기타/Vue.js
2023. 1. 25. 19:47