InputNumber 숫자 입력창

숫자를 입력받는 컴포넌트예요.

출처: 문서

본문

언제 사용하나요?

표준 숫자 값을 입력받아야 할 때 사용해요.

기본 사용법

:::demo d-input-number 요소에서 v-model로 변수를 바인딩하기만 하면 돼요. 변수의 초기값이 곧 기본값이 돼요.

<template>
  <div>
    <d-input-number v-model="num" @change="onChange" placeholder="请输入"></d-input-number>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup(props) {
    const num = ref(0);
    const onChange = (newVal, oldVal) => {
      console.log(newVal, oldVal);
    };
    return {
      num,
      onChange,
    };
  },
});
</script>

:::

비활성 상태

:::demo disabled 속성을 true로 설정하면 컴포넌트 전체가 비활성화돼요.

<template>
  <div>
    <d-input-number v-model="num" disabled></d-input-number>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup(props) {
    const num = ref(0);
    return {
      num,
    };
  },
});
</script>

:::

값 범위

:::demo 값을 특정 범위로 제한하려면 min 속성과 max 속성을 설정하면 돼요. 초기값이 max 속성값보다 크면 자동으로 max 속성값으로, min 속성값보다 작으면 자동으로 min 속성값으로 재설정돼요.

<template>
  <div>
    <d-input-number v-model="num" :min="1" :max="5"></d-input-number>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup(props) {
    const num = ref(0);
    return {
      num,
    };
  },
});
</script>

:::

스텝

:::demo step 속성으로 증감 단위를 조절할 수 있어요.

<template>
  <div>
    <d-input-number v-model="num" :step="3"></d-input-number>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup(props) {
    const num = ref(3);
    return {
      num,
    };
  },
});
</script>

:::

정밀도

:::demo precision 속성으로 숫자 정밀도를 조절할 수 있어요.

<template>
  <div>
    <d-input-number v-model="num" :precision="2" :step="0.1"></d-input-number>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup(props) {
    const num = ref(1);
    return {
      num,
    };
  },
});
</script>

:::

크기

:::demo lg, md, sm 세 가지 크기의 숫자 입력창을 제공하고, 기본 크기는 md예요.

<template>
  <div>
    <div class="space">Large</div>
    <d-input-number v-model="num1" :size="'lg'"></d-input-number>
    <div class="space">Middle</div>
    <d-input-number v-model="num2" :size="'md'"></d-input-number>
    <div class="space">Small</div>
    <d-input-number v-model="num3" :size="'sm'"></d-input-number>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const num1 = ref(1);
    const num2 = ref(2);
    const num3 = ref(3);
    return {
      num1,
      num2,
      num3,
    };
  },
});
</script>
<style>
.space {
  padding: 5px 0;
  font-size: 16px;
}
</style>

:::

정규식 제한

:::demo 정규식이나 정규식 문자열을 전달해 입력을 제한할 수 있어요. 입력할 때는 전달한 정규식을 우선 매칭하고, 설정하지 않으면 제한이 없어요.

<template>
  <div>
    <div class="space">reg</div>
    <d-input-number v-model="num1" :reg="reg"></d-input-number>
    
    <div class="space">regStr</div>
    <d-input-number v-model="num2" :reg="regStr"></d-input-number>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const reg = /^(-|\+)?\d*$/;
    const regStr = '^(-|\\+)*\\d*$';
    const num1 = ref(1);
    const num2 = ref(2);
    return {
      num1,
      num2,
      reg,
      regStr
    };
  },
});
</script>
<style>
.space {
  padding: 5px 0;
  font-size: 16px;
}
</style>

:::

빈 값 허용

:::demo allowEmpty가 true이면 입력창 값을 비울 수 있고, 빈 값은 null을 반환해요. 전달된 데이터가 number 타입이 아니거나 이전 입력에 값이 없을 때도 null을 반환해요.

<template>
  <div>
    <d-input-number v-model="num" :allowEmpty="true" @change="onChange"></d-input-number>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup(props) {
    const num = ref(undefined);
    const onChange = (newVal, oldVal) => {
      console.log(newVal, oldVal);
    };
    return {
      num,
      onChange
    };
  }
})
</script>

:::

InputNumber 파라미터

InputNumber 이벤트

InputNumber 메서드

InputNumber 타입 정의

ISize

type ISize = 'lg' | 'md' | 'sm';

더 알아보기 (Learn more)

InputNumber로 범위와 정밀도가 잡힌 숫자 입력을 받을 수 있어요. 더 자세한 내용은 공식 문서를 참고하세요.