安裝
Terminal
pnpm dlx shadcn-vue add @admin/number-fieldimport { AdminNumberField, AdminNumberFieldContent, AdminNumberFieldDecrement, AdminNumberFieldIncrement, AdminNumberFieldInput,} from '@/components/admin/number-field'用法
<script setup lang="ts">import { ref } from 'vue'import { AdminNumberField, AdminNumberFieldContent, AdminNumberFieldDecrement, AdminNumberFieldIncrement, AdminNumberFieldInput} from '@/components/admin/number-field'const value = ref(1)</script><template> <admin-number-field v-model="value" :max="10" :min="0"> <admin-number-field-content> <admin-number-field-decrement /> <admin-number-field-input /> <admin-number-field-increment /> </admin-number-field-content> </admin-number-field></template>場景
自訂 step
<script setup lang="ts">import { ref } from 'vue'import { AdminNumberField, AdminNumberFieldContent, AdminNumberFieldDecrement, AdminNumberFieldIncrement, AdminNumberFieldInput} from '@/components/admin/number-field'const value = ref(10)</script><template> <admin-number-field v-model="value" :max="100" :min="0" :step="5"> <admin-number-field-content> <admin-number-field-decrement /> <admin-number-field-input /> <admin-number-field-increment /> </admin-number-field-content> </admin-number-field></template>停用狀態
<script setup lang="ts">import { ref } from 'vue'import { AdminNumberField, AdminNumberFieldContent, AdminNumberFieldDecrement, AdminNumberFieldIncrement, AdminNumberFieldInput} from '@/components/admin/number-field'const value = ref(5)</script><template> <admin-number-field v-model="value" disabled> <admin-number-field-content> <admin-number-field-decrement /> <admin-number-field-input /> <admin-number-field-increment /> </admin-number-field-content> </admin-number-field></template>錯誤狀態
<script setup lang="ts">import { ref } from 'vue'import { AdminNumberField, AdminNumberFieldContent, AdminNumberFieldDecrement, AdminNumberFieldIncrement, AdminNumberFieldInput} from '@/components/admin/number-field'const value = ref(1)</script><template> <admin-number-field v-model="value" is-error :max="10" :min="0"> <admin-number-field-content> <admin-number-field-decrement /> <admin-number-field-input /> <admin-number-field-increment /> </admin-number-field-content> </admin-number-field></template>API 參考
組成
<template> <admin-number-field v-model="value"> <admin-number-field-content> <admin-number-field-decrement /> <admin-number-field-input /> <admin-number-field-increment /> </admin-number-field-content> </admin-number-field></template>admin-number-field
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
defaultValue | number | undefined | — | — |
modelValue | number | null | undefined | — | — |
min | number | undefined | — | The smallest value allowed for the input. |
max | number | undefined | — | The largest value allowed for the input. |
step | number | undefined | — | The amount that the input value changes with each increment or decrement "tick". |
stepSnapping | boolean | undefined | — | When `false`, prevents the value from snapping to the nearest increment of the step value |
focusOnChange | boolean | undefined | — | When `true`, the input will be focused when the value changes. |
formatOptions | Intl.NumberFormatOptions | undefined | — | Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user. |
locale | string | undefined | — | The locale to use for formatting and currencies |
disabled | boolean | undefined | — | When `true`, prevents the user from interacting with the Number Field. |
readonly | boolean | undefined | — | When `true`, the Number Field is read-only. |
disableWheelChange | boolean | undefined | — | When `true`, prevents the value from changing on wheel scroll. |
invertWheelChange | boolean | undefined | — | When `true`, inverts the direction of the wheel change. |
id | string | undefined | — | Id of the element |
asChild | boolean | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "div" | The element or component this component should render as. Can be overwritten by `asChild`. |
name | string | undefined | — | The name of the field. Submitted with its owning form as part of a name/value pair. |
required | boolean | undefined | — | When `true`, indicates that the user must set the value before the owning form can be submitted. |
class | ClassValue | — | 根元素之自訂 class |
isError | boolean | undefined | — | 設為 `true` 時掛上 `data-is-error` 屬性供樣式 hook |
Events
| 名稱 | Payload | 說明 |
|---|---|---|
update:modelValue | number | — |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | { modelValue: number | undefined; textValue: string; readonly: boolean; } | — |
admin-number-field-content
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-number-field-input
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
admin-number-field-increment
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
disabled | boolean | undefined | — | — |
asChild | boolean | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "div" | The element or component this component should render as. Can be overwritten by `asChild`. |
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-number-field-decrement
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
disabled | boolean | undefined | — | — |
asChild | boolean | undefined | — | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | globalThis.Component | AsTag | undefined | "div" | The element or component this component should render as. Can be overwritten by `asChild`. |
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |