[vue2] 여러 숫자 자동입력 컴포넌트

작성자: ospace114@empal.com, http://ospace.tistory.com/

속성

• size: 숫자 입력 개수

사용예

<InputNumbers :size="3" v-model="myNumbers"></InputNumbers>

소스코드

<template>
    <div ref="inputNumbers">
      <input type="text" class="input-numbers" maxlength="1"  v-for="(id,idx) in size" v-model="data[idx]" @input="onInput($event, idx)" @click="onClick(idx)" :key="idx"/>
    </div>
</template>
<script>
function applyTo(str, array) {
  for(let i=0; i<array.length; ++i) {
    array[i] = str.charAt(i);
  }
  return array;
}
export default {
    props: {
      value: {
        type: String,
        default: '',
      },
      size: {
        type: Number,
        default: 2,
      }
    },
    data() {
      return {
        data: applyTo(this.value, new Array(this.size)),
      };
    },
    computed: {
        numbers() {
          return this.$refs.inputNumbers.getElementsByClassName('input-numbers');
        },
    },
    watch: {
        value() {
            applyTo(this.value, this.data);
        },
        data() {
          this.$emit('input', this.data.join(''));
        },
    },
    methods: {
      onInput(ev, idx) {
        let value = ev.target.value.replace(/[^0-9]/g, '');
        this.data[idx] = value;
        if (!value) return;
        let numbers = this.numbers;
        ++idx < numbers.length && numbers[idx].select();
      },
      onClick(idx) {
        this.numbers[idx].select();
      },
    }
}
</script>
<style scoped>
  .input-numbers {
    max-width: 12px;
  }
</style>