Number Field
문자열 입력을 검증하거나 계산하면서 정확한 십진수를 유지합니다.
용법
정확한 값 정확한 소수
입력한 십진수 0.1을 정확한 값으로 유지합니다.
Committed value0.1
<!-- Number Field / Exact Decimal -->
<script setup lang="ts">
import { NumberField } from '@sectile/vue/number-field'
</script>
<template>
<label>
Amount
<NumberField default-value="0.1" />
</label>
</template>계산식 입력
50-20%를 입력하면 계산 결과인 40으로 확정됩니다.
Committed value50
<!-- Number Field / Calculator -->
<script setup lang="ts">
import { NumberField } from '@sectile/vue/number-field'
import { createCalculatorExpression } from '@sectile/core/number-field'
const policies = {
evaluator: createCalculatorExpression({
precision: 12,
rounding: 'half-even',
}),
}
</script>
<template>
<label>
Amount
<NumberField default-value="50" :policies="policies" />
</label>
</template>거듭제곱
2^3^2를 입력하면 거듭제곱을 오른쪽부터 계산합니다.
Committed value2
<!-- Number Field / Exponent -->
<script setup lang="ts">
import { NumberField } from '@sectile/vue/number-field'
import { createCalculatorExpression } from '@sectile/core/number-field'
const policies = {
evaluator: createCalculatorExpression({
precision: 12,
rounding: 'half-even',
}),
}
</script>
<template>
<label>
Amount
<NumberField default-value="2" :policies="policies" />
</label>
</template>범위 제한
입력값을 설정한 최솟값과 최댓값 범위 안에서 확정합니다.
Committed value40.25
<!-- Number Field / Bounded -->
<script setup lang="ts">
import { NumberField } from '@sectile/vue/number-field'
const policies = { min: '0', max: '100', }
</script>
<template>
<label>
Amount
<NumberField default-value="40.25" :policies="policies" />
</label>
</template>API
Vue 패키지: @sectile/vue/number-field
컴포넌트
NumberField
Props
NumberFieldProps
defaultValue컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled사용자 조작을 막을지 여부입니다.
label보조 기술이 읽는 컨트롤 이름입니다.
modelValue부모가 상태를 관리할 때 사용할 현재 값입니다.
native브라우저 기본 날짜 또는 시간 입력 UI를 사용할지 여부입니다.
policies검증, 이동, 선택 동작을 조정하는 정책입니다.
readonly값 확인만 허용하는 읽기 전용 상태 여부입니다.
required제출 전에 올바른 값이 반드시 있어야 하는지 여부입니다.
파트
공통 범위: [data-scope="number-field"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.
| 파트 | 선택자 | 역할 | 추가 속성 |
|---|---|---|---|
input | [data-part="input"] | 편집 값이나 초안을 입력받습니다. | — |
키보드 동작
| 키 | 동작 |
|---|---|
| Standard editing keys | 호스트 입력 관례에 따라 텍스트를 편집하고 선택합니다. |
| Tab | 기본 텍스트 동작을 유지하며 포커스를 이동합니다. |
접근성
이름이 있는 입력은 기본 편집 동작을 유지하며 오류·비활성·읽기 전용 상태를 노출합니다.