Skip to content

ScrubInputRoot

ScrubInputRoot to bezstanowy prymityw korzenia dla numerycznego pola wejściowego z przeciąganiem.

Zarządza:

  • wyświetlaniem wartości mieszanych
  • stanem edycji vs przeciągania
  • numerycznym przeciąganiem sterowanym wskaźnikiem
  • semantyką zatwierdzania zakończonych edycji

Props

PropDefaultType
modelValue*
Bieżąca wartość liczbowa lub sentinel wartości mieszanej.
number | symbol
min
Minimalna dozwolona wartość.
-Infinitynumber | undefined
max
Maksymalna dozwolona wartość.
Infinitynumber | undefined
step
Mnożnik kroku przeciągania.
1number | undefined
sensitivity
Mnożnik czułości wskaźnika.
1number | undefined
placeholder
Placeholder dla wartości mieszanych.
Mixedstring | undefined

Model

PropDefaultType
v-model:modelValue*
Zapisywalny model liczbowy.
number

Zdarzenia

EventPayloadDescription
update:modelValuevalue: numberEmitowane podczas przeciągania lub edycji.
commitvalue: number, previous: numberEmitowane gdy interakcja edycji zostaje zatwierdzona.

Sloty

SlotPropsDescription
default{ modelValue: number | symbol, displayValue: string, isMixed: boolean, editing: boolean, scrubbing: boolean, startScrub: (event: PointerEvent) => void, startEdit: () => void, commitEdit: (event: Event) => void, keydown: (event: KeyboardEvent) => void, placeholder: string }Pełny kontrakt renderowania pola przeciągania.

Przykład

vue
<ScrubInputRoot v-model:model-value="value" @commit="commit" v-slot="ctx">
  <div @pointerdown="ctx.startScrub">
    <ScrubInputDisplay />
    <ScrubInputField class="w-16" />
  </div>
</ScrubInputRoot>

Powiązane API

Released under the MIT License.