Input Number

Input Number

출처: 문서

본문

범위를 설정할 수 있는 숫자 입력 컴포넌트예요. 수량, 가격처럼 숫자만 다루는 입력란이 필요할 때 사용해요.

기본 사용 (Basic usage)

<el-input-number> 요소에 v-model로 변수를 바인딩하면 바로 사용할 수 있어요.

TIP

입력란에 잘못된 문자열을 입력하면, 오류 결과로 입력값이 상위 레이어에 NaN으로 방출돼요.

비활성 (Disabled)

disabled 속성은 boolean을 받아요. 값이 true면 컴포넌트는 비활성화돼요. 값의 범위만 제한하고 싶다면 min 속성으로 최솟값을, max로 최댓값을 설정할 수 있어요. 기본적으로 최솟값은 Number.MIN_SAFE_INTEGER예요.

스텝 (Steps)

증분 단계를 정의할 수 있어요. step 속성을 추가해 단계를 설정해요.

스텝 엄격 (Step strictly)

step-strictly 속성은 boolean을 받아요. 이 속성이 true면 입력값은 step의 배수만 될 수 있어요.

정밀도 (Precision)

precision 속성을 추가해 입력값의 정밀도를 설정할 수 있어요.

TIP

precision 값은 음수가 아닌 정수여야 하고, step의 소수점 자릿수보다 작아선 안 돼요.

크기 (Size)

size 속성을 사용해 large 또는 small 크기를 추가로 설정할 수 있어요.

<template>
  <div class="demo-input-number">
    <el-input-number v-model="num1" size="large" :min="1" :max="10" />
    <el-input-number v-model="num2" :min="1" :max="10" />
    <el-input-number v-model="num3" size="small" :min="1" :max="10" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const num1 = ref(1)
const num2 = ref(2)
const num3 = ref(3)
</script>

컨트롤 위치 (Controls Position)

controls-position을 설정해 컨트롤 버튼의 위치를 정할 수 있어요.

<template>
  <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const num = ref(1)
const handleChange = (value: number | undefined) => {
  console.log(value)
}
</script>

커스텀 아이콘 (Custom Icon) 2.6.3

decrease-icon과 increase-icon을 사용해 커스텀 아이콘을 설정할 수 있어요.

prefix와 suffix (With prefix and suffix) 2.8.4

prefix와 suffix라는 이름의 슬롯을 사용할 수 있어요. 예를 들어 앞에 통화 단위 "RMB"를 붙일 수 있어요.

TIP

정밀도를 위해 입력 숫자는 Number.MIN_SAFE_INTEGER부터 Number.MAX_SAFE_INTEGER까지로 제한돼요.

Formatter 2.14.0

formatter로 값을 표시하고, 보통 parser를 함께 사용해요. formatter가 설정되면 내부 입력 타입이 text로 바뀌어 숫자가 아닌 문자도 입력될 수 있어요. 내부적으로 컴포넌트는 Number.parseFloat로 입력을 처리해요: 파싱이 성공하면 파싱된 숫자가 model-value에 기록되고, 파싱 결과가 NaN이면 model-value는 null로 설정돼요.

API

Attributes

Slots

Events

Exposes

더 알아보기 (Learn more)