Numeric

숫자 입력에 특화된 커스텀 컴포넌트입니다. 통화 기호, 퍼센트, 천 단위 구분자, 소수점 자릿수 등 다양한 옵션을 제공하여 금액이나 수치 입력을 사용자 친화적으로 처리할 수 있도록 돕습니다. v-model을 통해 양방향 데이터 바인딩이 가능하며, readonly, use-span, base-amount 등의 유틸리티 기능도 함께 지원합니다.

이 컴포넌트는 내부적으로 <el-input>을 사용하고 있으며, 해당 컴포넌트의 속성들을 그대로 상속받아 활용할 수 있습니다. 자세한 속성 목록은 공식문서를 참고하세요.

Props

Prop 이름	타입	기본값	설명
currency	String	''	통화 기호 (₩, $ 등)
max	Number	Number.MAX_SAFE_INTEGER	입력 가능한 최대 값
min	Number	Number.MIN_SAFE_INTEGER	입력 가능한 최소 값
minus	Boolean	false	음수 입력 허용 여부
placeholder	String, Number	''	입력창의 플레이스홀더 텍스트
empty-value	Number, String	null	값이 비어 있을 때의 기본값
precision	Number	0	소수점 이하 자리수
separator	String	','	천 단위 구분자 (. 또는 ,)
model-value	Number, String	null	v-model 바인딩 값
readonly	Boolean	false	읽기 전용 여부
use-span	Boolean	false	true일 경우 <span>으로 표시
read-only-class	String	''	readonly 속성이 있을 때 class 추가
currency-symbol-position	String	'prefix'	통화 기호 위치 (prefix or suffix)
base-amount	Number	1	입력값 배율 조정 (예: 1000 단위 변환)
ondemand-decimal	Boolean	false	필요할 때만 소수점 표시
no-separator	Boolean	false	천 단위 구분자 제거 여부
percent	Boolean	false	% 기호 추가 여부
max-length	Number		입력 가능한 최대 글자 수
error-message	String		오류 발생 시 표시할 메시지
error	Boolean	false	에러 상태 여부

Slot

이름	설명
prefix	<el-input>의 왼쪽 영역에 위치하는 슬롯입니다. 아이콘, 텍스트 등을 넣을 수 있습니다.
suffix	<el-input>의 오른쪽 영역에 위치하는 슬롯입니다. 아이콘, 텍스트 등을 넣을 수 있습니다.

기본

#prefix

수량:

#suffix

원

<!--#prefix-->
<nv-numeric v-model="price">
    <template #prefix>
        수량:
    </template>
</nv-numeric>
<!--#suffix-->
<nv-numeric v-model="price">
    <template #suffix>
        원
    </template>
</nv-numeric>

기본

• 가장 기본적인 숫자 입력 필드를 보여줍니다.

기본

<nv-numeric v-model="price"/>

기호 추가

• currency prop을 사용하여 입력 값 앞에 통화 기호(₩, $)를 추가할 수 있습니다.
• percent prop을 true로 설정하면 입력 값 뒤에 % 기호를 추가합니다.
• currency-symbol-position prop을 사용하여 통화 기호의 위치를 prefix (기본값, 앞) 또는 suffix (뒤)로 변경할 수 있습니다.

기호 추가

<!--통화 기호 추가-->
<nv-numeric v-model="price" currency="₩"/>
<!--'%' 기호 추가-->
<nv-numeric v-model="price" percent />
<!--통화 기호 위치 변경-->
<nv-numeric v-model="price" currency="₩" currency-symbol-position="suffix"/>

readonly

• readonly prop을 true로 설정하면 입력 필드를 읽기 전용으로 만들어 사용자의 수정을 막습니다.
• use-span prop을 true로 설정하면 입력 필드 대신 <span> 태그로 값을 표시합니다. 이는 단순히 값을 보여줄 때 입력 필드 스타일 없이 텍스트 형태로 나타내고자 할 때 유용합니다.

readonly

useSpan

<!--readonly-->
<nv-numeric v-model="price" readonly />
<!--useSpan-->
<nv-numeric v-model="price" use-span />

baseAmount

• base-amount prop을 사용하여 입력 값의 단위를 조정할 수 있습니다. 예를 들어 base-amount="1000"으로 설정하면 사용자가 입력하는 값은 1000 단위로 처리되어 표시됩니다.

• 이는 큰 금액을 간편하게 입력하거나 특정 단위를 기준으로 값을 관리할 때 유용합니다. 입력된 값은 설정된 base-amount로 나누어 v-model에 반영됩니다.

• 입력값은 설정된 단위에 따라 자동으로 반올림되어 처리됩니다.

baseAmount

<nv-numeric v-model="price" base-amount="1000" />
<nv-numeric v-model="price" base-amount="100000" />