Vuetify - TypeScript 환경에서 v-mask 사용하기

v-text-filed ui 컴포넌트 에서 v-mask 기능을 사용해야하는데  구글링해서 나오는 방법으로는 실패했고 사수의 도움으로 간신히 해결한거라 기록한다 (ㅠ.ㅠ)

 

보통 밑의 내용처럼...해결하는데 

https://thewebdev.info/2022/03/13/how-to-use-mask-in-a-vue-js-vuetify-text-field/

How to use mask in a Vue.js Vuetify text field? - The Web Dev

간단하게 설명하자면 

1. 해당 패키지 install 하기

npm install v-mask

2. main.js 안에 글로벌하게 사용할 수 있도록 등록

import { VueMaskDirective } from "v-mask"
Vue.directive("mask", VueMaskDirective)

3. v-text-filed 태그 안에 사용

<template>
  <div>
    <v-text-field
      v-mask="'###.###.###-##'"
      :value="currentValue"
      @input="handleInput"
    />
  </div>
</template>

 

일단 현재 진행하고 있는 프로젝트는 TypeScript 를 사용하고 있고 main.js가 존재하지 않는다.

환경에 대한 지식도 부족하고 아직 기초가 많이 부족해서..바로바로 적용하기에 어려움이 있었다.

 

해결한 방법

: v-mask 말고 @titou10/v-mask 라는 패키지를 사용했다. 이유는..v-mask TypeScript 로 열심히 구글링 했을 때 가장 많이 나오는 게 저 패키지였기 때문..^^

 

cf) https://www.npmjs.com/package/@titou10/v-mask

@titou10/v-mask

1. 해당 패키지 install 하기 

npm install @titou/v-mask --save

2. 사용하기 : 그냥 사용할 .vue 페이지에 import 하고 사용하면 된다.

import { mask } from '@titou10/v-mask'
export default {
  directives: { mask }
}

<v-text-field v-model="..." v-mask="{mask:'A##', unmaskedVar: 'myVar'}" />

사이트에서 설명하는 건 위와 같지만 실제 프로젝트에서 구현한 건 환경이 달라서 살짝 다르다.

대강 적자면 Nuxt.js 를 사용하고 있고, nuxt-property-decorator 를 사용하고 있다.

또 Vuetify를 사용하지만 ui컴포넌트 자체를 쓰는 건 아니고 해당 ui 컴포넌트를 따로 커스터마이징하여 ui 공통 컴포넌트를 만들어서 사용한다.

이러한 이유로 사용하려는 페이지에서  커스터마이징한 text-filed 컴포넌트를 사용하려면 사용할 옵션값을 Prop으로 넘겨주어야한다(여기선 마스크 기능만 명시)

<template>
    <v-text-field>
    	...
        v-mask="getMask"
        ...
    </v-text-field>
</template>


<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator'
import { mask } from '@titou10/v-mask'
@Component({
	directives: {mask}
})
export default class TextField extends Vue {
	@Prop() maskType!: string

	get getMask(){ // prop으로 받은 maskType을 getter로 바로 읽고 해당 값이 date면 값을 리턴 
    	if(this.maskType === 'date'){
        	return '####-##-##'
        }else{
        	return ''
        } 		
    }
}
</script>

 

비슷한 환경으로 진행된 프로젝트가 두번째임에도 불구하고 아직 기초적인 이해가 부족한 것 같다.

공부를 열심히 하자.........^^

 

밑엔 설명이 잘 나와있는 것 같아서 첨부함 나중에 보고 공부할 것 !

http://ccambo.github.io/Dev/Vue/6.How-to-use-vue-property-decorator/

vue-property-decorator 정리