[ Quasar ] q-input mask로 숫자 포매팅

 

q-input의 mask를 잘만 이용하면 정규표현식 등을 사용하지 않고도 입력 데이터 값의 포매팅을 진행할 수 있다.

 

Input | Quasar Framework

 

 

내가 하고 싶었던 숫자 포매팅은 2가지

1. 숫자 세자리마다 콤마
   • 입력되는 숫자의 길이가 정해지지 않고 가변적임
2. 소수점 2자리 표기
   • 최초에 0으로 자리 채워주기 → 0.00

 

그래서 부가적으로 mask와 관련된 옵션들을 추가해주었다.

• unmasked-value : 포매팅한 값과는 상관없이 raw value를 보존(사용)
• reverse-fill-mask : input 값의 길이가 고정적이지 않을 때
• fill-mask : 정해진 mask의 길이만큼 특정한 값으로 채워줌

<q-input
  :mask="maskRule(mask)"
  :unmasked-value="mask === 'decimal' ? false : true"
  reverse-fill-mask
  :fill-mask="mask === 'decimal' ? '0' : false"
>

const maskRule = (type: string) => {
  switch (type) {
    case 'comma':
      return ',###'.repeat(props.value.length / 3 + 1);
    case 'decimal':
      return '#.##';
  }
};

 

숫자 세자리 콤마의 경우 길이가 가변적이므로 repeat 메서드를 활용했고, 소수점의 경우에는 quasar가 제공하는 mask token을 이용했다.

 

 

※ 3/22 수정

세자리 콤마의 경우 최대 범위가 999,999,999,999이기 때문에 마스크 규칙을 넉넉하게 만들어두는 것으로 간편하게 수정했다.

위의 repeat를 사용하는 방법의 경우 연산이 많아지고 커서 위치에도 악영향을 끼치기 때문이다. 

(이렇게 간편한 것을 멀리멀리 돌아왔다니...!)

    case 'comma':
      return '###,###,###,###,###';

mask token