라벨이 vue인 게시물 표시

[Vue] 전화번호 입력/조회시 '-' 자동으로 넣어주기

이미지
Vue 로 홍보 플랫폼 작업을 하면서 필요한 기능이 있어서
전화번호 필터를 개발 ( = 예외처리 노가다 ) 작업한 부분 블로그에 공유합니다.

개발환경: Vue CLI 2
개발 프레임워크: Vue2

angular 나 javascript 에도 쓸 수 있을 것 같습니다.
전국의 프로야근러 & 월화수목금금금 개발자님들 화이팅!!

+ 보충할 점이나 부족한 부분이 있어서 알려주시면 반영할께요~

입력할때 전화번호 파이프 (-) 자동으로 찍어주기[동작화면]

[템플릿]
<input type="text" v-model="contact" @keyup="getPhoneMask(contact)" />

[스크립트]
export default { ... data: () => ({ //전화번호 contact:null, }), methods: { getPhoneMask(val) { let res = this.getMask(val) this.contact = res //서버 전송 값에는 '-' 를 제외하고 숫자만 저장 this.model.contact = this.contact.replace(/[^0-9]/g, '') }, getMask( phoneNumber ) { if(!phoneNumber) return phoneNumber phoneNumber = phoneNumber.replace(/[^0-9]/g, '') let res = '' if(phoneNumber.length < 3) { res = phoneNumber } else { if(phoneNumber.substr(0, 2) =='02') {…

Vue.js 라이브러리

플랫폼 사업팀에서 할 새로운 사업에 Vue.js 를 사용해서 만들어 보기로 했습니다.
그래서 알아본 상용 또는 무료 라이브러리들입니다


먼저 공식 홈페이지 https://vuejs.org/ 에서는 간단한 템플릿과 예제들을 볼 수 있구요,

https://github.com/vuejs/awesome-vue
이곳은 vue 에서 필요한 기능들을 다운받을 수 있는 웬만한 모든 링크가 모여있는 곳입니다.



1. Vuetifyjs

https://vuetifyjs.com/ko/

ionic 을 생각나게 하는 라이브러리, 웬만한 UI 컴포넌트는 다 있습니다


2. Vue Material

https://vuematerial.io/

angular 버전에서도 굉장히 잘 만들어져 있던 material UI 라이브러리가 vue 에도 있네요
한 가지 걱정되는 건, 예쁘지만 무거울 수도 있다는 점..?
퍼포먼스 때문에 angular 프로젝트에서는 제대로 사용을 못해봤습니다
vue 는 다른지 좀 더 테스트 해봐야겠네요~


3. Keen UI

https://josephuspaye.github.io/Keen-UI/#/ui-alert

앞서 소개한 라이브러리들 보다는 크지 않은 규모의, 작고 심플한 컴포넌트들이 많이 있습니다. 부분적으로 필요할 때 쓰면 좋을 것 같네요!



2018년도 꼭 알아야 할 vue 라이브러리들
https://blog.bitsrc.io/11-vue-js-component-libraries-you-should-know-in-2018-3d35ad0ae37f

+ 하나 이상의 라이브러리를 쓰는 것은 추천하지 않습니다. 무거워지기 때문에


그밖에 wrapbootstrap 에서 보았던 CMS 용 UI 라이브러리 중 하나인 GENESISUI 의 vue.js 버전 모음도 있네요. 그래프 등이 많아서 하나 사두면 CMS 만드는 시간을 절약할 수 있을 듯 합니다.
https://genesisui.com/admin-templates/vuejs/



모든 UI 에 가장 자주, 많이 쓰이는 갤러리 컴포넌트 vue 버전
https…