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>

سمة مخصَّصة

تطبيق لون سمة 青花瓷 (الخزف الأزرق).

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 ar from '@lh-ui/share/locales/lang/ar'
import enUS from '@lh-ui/share/locales/lang/en-US'

const locale = ref('ar')
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 ar from '@lh-ui/share/locales/lang/ar'
import enUS from '@lh-ui/share/locales/lang/en-US'

export default {
  data() {
    return {
      locale: 'ar',
      count: 0,
      ar: ar,
      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="إبقاء منزلتين عشريتين" />
  <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="إبقاء منزلتين عشريتين" />
  <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 */
  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 ​

تعريفات الأنواع ​