VOtpInput API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| autofocus | ||
| Automatically focuses the first input on page load | ||
| base-color | ||
| Sets the color of the input when it is not focused. | ||
| bg-color | ||
| Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| color | ||
| Applies specified color to the control - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| disabled | ||
| Removes the ability to click or target the input. | ||
| divider | ||
| 指定项之间的分隔字符。 | ||
| error | ||
| Puts the input in a manual error state. | ||
| focus-all | ||
| Puts all inputs into a focus state when any are focused | ||
| focused | ||
| 强制组件使用聚焦时的样式。 | ||
| height | ||
| 设定组件的高度。 | ||
| label | ||
| Sets the text of the v-label or v-field-label component. | ||
| length | ||
| The OTP field’s length. | ||
| loading | ||
| Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it’s supported by the component) or the primary color. | ||
| max-height | ||
| 设定组件的最大高度。 | ||
| max-width | ||
| 设定组件的最大宽度。 | ||
| min-height | ||
| 设定组件的最小高度。 | ||
| min-width | ||
| 设定组件的最小宽度。 | ||
| model-value | ||
| 组件 v-mode 的值。如果组件支持多属性，默认为空数组。 | ||
| placeholder | ||
| Sets the input’s placeholder text. | ||
| rounded | ||
| Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page . | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| type | ||
| Supported types: text, password, number. | ||
| variant | ||
| Applies a distinct style to the component. | ||
| width | ||
| 设定组件的宽度。 | ||
事件
| 名称 | 类型 |
|---|---|
| finish | |
| Emitted when the input is filled completely and cursor is blurred. | |
| update:focused | |
| Emitted when the input is focused or blurred | |
| update:modelValue | |
| 当组件的 model-value 更改时引发的事件。 | |
插槽
| default |
| 默认Vue 插槽。 |
| loader |
| Slot for custom loader (displayed when loading prop is equal to true). |
可用属性
| blur |
| Forces the input to lose focus. |
| focus |
| Focuses the first field in the input |
| isFocused |
| Returns true if the input is focused. |
| reset |
| Reset’s the input model to an empty array |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $otp-input-content-gap | |
| $otp-input-content-height | |
| $otp-input-content-max-width | |
| $otp-input-content-padding | |
| $otp-input-divided-content-max-width | |
| $otp-input-divider-margin | |
| $otp-input-field-font-size | |
| $otp-input-padding | |