Wheel

I use it for TimePicker, don't know if there are other uses.

Demos#

Simple usage, select value with scrolling.

Add the insert-empty prop to insert an empty value at the beginning.

You can also specify the label of this empty value by passing in a string.

Add the arrow prop to add arrow actions on both sides.

The passed options are disabled via the disabled option.

Add the selectable prop makes the options can be clicked to active.

Change to horizontal wheel via adding horizontal prop.

The loading state of the wheel can be controlled through the loading prop.

If you want to be read-only when loading, you need to add the loading-lock prop.

Different states can be set via state.

type WheelRawOption =
  | string
  | number
  | {
    value: string | number,
    label?: string,
    disabled?: boolean
  }

Name	Type	Description	Default	Since
arrow	`boolean`	Set whether to use the scroll wheel arrow indicator	`false`	-
candidate	`number`	Set the number of candidates up and down the scroll wheel, the optional range is 0 ~ 3	`2`	-
disabled	`boolean`	Set whether the wheel is disabled	`false`	`2.0.0`
disabled-item	`(value: string \| number, data: WheelRawOption) => boolean`	Set disabled items	`() => false`	`2.0.14`
horizontal	`boolean`	Set whether the scroll wheel is in landscape mode	`false`	-
insert-empty	`boolean \| string`	Set whether insert a empty value, can be specify the label when passing a string	`false`	`2.0.0`
loading	`boolean`	Set whether is loading	`false`	`2.0.0`
loading-lock	`boolean`	Set whether to be read-only when loading	`false`	`2.0.0`
no-transition	`boolean`	Whether to disable scroll transition effect	`false`	`2.2.17`
options	`WheelRawOption[]`	Set the options of wheel	`[]`	`2.0.0`
selectable	`boolean`	Sets whether the options can be active by clicking	`false`	`2.3.11`
state	`'default' \| 'success' \| 'error' \| 'warning'`	The state of wheel	`'default'`	`2.0.0`
value	`string \| number`	The index of the currently active element, can use `v-model` two-way binding	`0`	-