InputNumber 숫자 입력

LhInputNumber는 숫자 입력에 사용되며, 범위 제한, 스텝, 정밀도 제어를 지원합니다.

기본 사용법

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhInputNumber } from '@lh-ui/vue3'

const count = ref(0)
</script>

<template>
  <LhInputNumber v-model="count" />
</template>

vue

<script>
import { LhInputNumber } from '@lh-ui/vue3'

export default {
  components: { LhInputNumber },
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <LhInputNumber v-model="count" />
</template>

범위 제한

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhInputNumber } from '@lh-ui/vue3'

const level = ref(5)
</script>

<template>
  <LhInputNumber v-model="level" :min="1" :max="10" />
</template>

vue

<script>
import { LhInputNumber } from '@lh-ui/vue3'

export default {
  components: { LhInputNumber },
  data() {
    return {
      level: 5
    }
  }
}
</script>

<template>
  <LhInputNumber v-model="level" :min="1" :max="10" />
</template>

커스텀 테마

青花瓷 (ceramic blue) 테마 색상을 적용합니다.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhInputNumber } from '@lh-ui/vue3'

const count = ref(0)
const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhInputNumber v-model="count" />
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhInputNumber } from '@lh-ui/vue3'

export default {
  data() {
    return {
      count: 0,
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhInputNumber v-model="count" />
  </LhConfigProvider>
</template>

다국어

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhInputNumber } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const count = ref(0)
</script>

<template>
  <!-- 언어 팩 설정 -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <!-- 플레이스홀더 텍스트가 언어에 따라 전환됩니다 -->
    <LhInputNumber v-model="count" :placeholder="locale === 'zh-CN' ? '请输入数字' : 'Enter number'" />
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhInputNumber } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  data() {
    return {
      locale: 'zh-CN',
      count: 0,
      zhCN: zhCN,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- 언어 팩 설정 -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <!-- 플레이스홀더 텍스트가 언어에 따라 전환됩니다 -->
    <LhInputNumber v-model="count" :placeholder="locale === 'zh-CN' ? '请输入数字' : 'Enter number'" />
  </LhConfigProvider>
</template>

스텝과 정밀도

vue

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

const value = ref<number | null>(1)
</script>

<template>
  <LhInputNumber v-model="value" :step="2" />
  <LhInputNumber v-model="value" :precision="2" placeholder="소수점 2자리 유지" />
  <LhInputNumber v-model="value" :step="10" step-strictly placeholder="10의 배수만 가능" />
</template>

vue

<script>
export default {
  data() {
    return { value: 1 }
  },
}
</script>

<template>
  <LhInputNumber v-model="value" :step="2" />
  <LhInputNumber v-model="value" :precision="2" placeholder="소수점 2자리 유지" />
  <LhInputNumber v-model="value" :step="10" step-strictly placeholder="10의 배수만 가능" />
</template>

크기와 컨트롤 버튼

vue

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

const value = ref<number | null>(1)
</script>

<template>
  <LhInputNumber v-model="value" size="small" />
  <LhInputNumber v-model="value" size="medium" />
  <LhInputNumber v-model="value" size="large" />
  <LhInputNumber v-model="value" :controls="false" placeholder="컨트롤 버튼 없음" />
</template>

vue

<script>
export default {
  data() {
    return { value: 1 }
  },
}
</script>

<template>
  <LhInputNumber v-model="value" size="small" />
  <LhInputNumber v-model="value" size="medium" />
  <LhInputNumber v-model="value" size="large" />
  <LhInputNumber v-model="value" :controls="false" placeholder="컨트롤 버튼 없음" />
</template>

비활성화와 폼 이름

vue

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

const value = ref<number | null>(1)
</script>

<template>
  <LhInputNumber v-model="value" disabled />
  <LhInputNumber v-model="value" name="quantity" placeholder="name=quantity" />
</template>

vue

<script>
export default {
  data() {
    return { value: 1 }
  },
}
</script>

<template>
  <LhInputNumber v-model="value" disabled />
  <LhInputNumber v-model="value" name="quantity" placeholder="name=quantity" />
</template>

InputNumber API

Props

프로퍼티	설명	타입	기본값
modelValue	현재 값	`number`	`null`
min	최솟값	`number`	`-Infinity`
max	최댓값	`number`	`Infinity`
step	스텝	`number`	`1`
stepStrictly	입력값이 step의 배수여야 하는지 여부	`boolean`	`false`
precision	숫자 정밀도	`number`	—
disabled	비활성화 여부	`boolean`	`false`
size	크기	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
controls	컨트롤 버튼 표시 여부	`boolean`	`true`
placeholder	플레이스홀더 텍스트	`string`	`''`
name	네이티브 폼 이름	`string`	`''`
sx	빠른 레이아웃 속성(예: `{ mt: 2, w: '50%' }`), 인라인 스타일로 변환되어 루트 요소에 적용	`LhSxProps`	—

Events

이벤트	설명	매개변수
update:modelValue	값이 변경될 때	`value: number`
change	값 변경이 확정될 때	`value: number`

키보드 위/아래 화살표로 값을 증감할 수 있습니다.

타입 정의

이 컴포넌트가 외부로 노출하는 TypeScript 타입 구조는 다음과 같습니다(packages/components/input-number/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 클릭하여 전체 정의를 펼쳐 볼 수 있습니다; 프로퍼티 설명은 위쪽 Props 표를 참고하세요):

LhInputNumberProps

export interface LhInputNumberProps {
  modelValue?: number | null
  min?: number
  max?: number
  step?: number
  stepStrictly?: boolean
  precision?: number
  disabled?: boolean
  size?: LhComponentSize
  controls?: boolean
  placeholder?: string
  name?: string
  /** 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhInputNumberSize

export type LhInputNumberSize = LhComponentSize

LhComponentSize _{(출처: @lh-ui/share/core/shared)}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]

InputNumber 숫자 입력 ​

기본 사용법 ​

범위 제한 ​

커스텀 테마 ​

다국어 ​

스텝과 정밀도 ​

크기와 컨트롤 버튼 ​

비활성화와 폼 이름 ​

InputNumber API ​

Props ​

Events ​

타입 정의 ​