vue
-
vue로 ios 스타일 actionSheet 만들어보기vue 2023. 6. 6. 22:45
이 글은 2021.02.22에 타 플랫폼에 작성했던 글을 옮긴 포스트 입니다. 최신 정보와 불일치하는 정보가 있을수 있습니다. 📝 문제 web-view에서 dropdown을 띄울 경우 os별 기본 브라우저의 dropdown이 나오는데 기획상 android와 ios 둘 다 같은 ui를 제공해야 했다. 결국은 커스텀 디자인으로 가게 되었지만 그전에 목표로 했던 ios의 기본 actionSheet 구현과정을 포스팅 해보려한다. 목표는 아래와 같은 UI! 조사 vue-ios-actionsheet 우선 라이브러리들을 찾아보았다. 제일 부합해 보이는 라이브러리(vue-ios-actionsheet)를 찾았는데 4년전이 마지막 업데이트였기 때문에 실 서비스에는 적용이 무리라고 판단했고, 비교적 최근에 작성된 프로젝트는..
-
v-model의 IME 입력방식 이슈와 custom input maskvue 2023. 6. 6. 22:23
이 글은 2021.02.02에 타 플랫폼에 작성했던 글을 옮긴 포스트 입니다. 최신 정보와 불일치하는 정보가 있을수 있습니다. input masking을 라이브러리를 사용않고 구현하다가 한글입력시 키보드 입력에 바로바로 v-model값이 업데이트가 안되는 문제를 발견했다. 문제 발견 전: v-model과 keyup으로 구현된 마스킹 H:MM:SS 형식의 마스킹을 원했기 때문에 keyup 이벤트가 발생할 때 현재 value의 형식에 따라 :을 붙이고 숫자나 콜론이 아닐 경우는 입력을 원복 시키는 방식으로 구현 //script maskingInput(event: KeyboardEvent): void { if (event.key !== "Backspace") { if(this.hour) { if(!this.h..