PinInput

PinInputGitHub
一个用于输入 PIN 码的输入元素。

用法

使用 v-model 指令来控制 PinInput 的值。

<script setup lang="ts">
const value = ref([])
</script>

<template>
  <UPinInput v-model="value" />
</template>

使用 default-value prop 在您不需要控制其状态时设置初始值。

<template>
  <UPinInput :default-value="['1', '2', '3']" />
</template>

类型

使用 type 属性来更改输入类型。默认为 text。

<template>
  <UPinInput type="number" />
</template>
当 type 设置为 number 时，它将只接受数字字符。

遮罩

使用 mask 属性将输入视为密码。

<template>
  <UPinInput mask :default-value="['1', '2', '3', '4', '5']" />
</template>

OTP

使用 otp 属性启用一次性密码功能。启用后，移动设备可以自动检测并从短信或剪贴板内容中填充 OTP 代码，并支持自动完成。

<template>
  <UPinInput otp />
</template>

长度

使用 length 属性来更改输入框的数量。

<template>
  <UPinInput :length="6" />
</template>

占位符

使用 placeholder 属性设置占位文本。

<template>
  <UPinInput placeholder="○" />
</template>

颜色

使用 color 属性来更改 PinInput 聚焦时的环形颜色。

<template>
  <UPinInput color="neutral" highlight placeholder="○" />
</template>
highlight 属性在此用于显示焦点状态。当发生验证错误时，它会在内部使用。

变体

使用 variant 属性来更改 PinInput 的变体。

<template>
  <UPinInput color="neutral" variant="subtle" placeholder="○" />
</template>

尺寸

使用 size 属性来更改 PinInput 的大小。

<template>
  <UPinInput size="xl" placeholder="○" />
</template>

禁用

使用 disabled 属性来禁用 PinInput。

<template>
  <UPinInput disabled placeholder="○" />
</template>

API

属性

属性默认值类型
as

'div'

any

此组件应渲染为的元素或组件。

颜色

'primary'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

variant

'outline'

"outline" | "soft" | "subtle" | "ghost" | "none"

尺寸

'md'

"md" | "xs" | "sm" | "lg" | "xl"

length

5

string | number

输入字段的数量。

自动聚焦

boolean

自动聚焦延迟

0

数字

高亮

boolean

默认值

(string[] | number[])[]

Pin 输入框初次渲染时的默认值。当您不需要控制其值状态时使用。

禁用

boolean

当为 true 时，阻止用户与密码输入框交互

id

string

元素的 ID

mask

boolean

当为 true 时，密码输入框将被视为密码。

modelValue

null | string[] | number[]

Pin 输入框的受控值状态。可绑定为 v-model。

name

string

字段的名称。作为名称/值对的一部分随其所属表单提交。

otp

boolean

当为 true 时，移动设备将从消息或剪贴板中自动检测 OTP，并启用自动完成字段。

占位符

string

空密码输入框使用的占位符字符。

必需

boolean

当为 true 时，表示用户必须在提交所属表单之前设置值。

类型

'text'

"number" | "text"

输入框的输入类型。

UI

{ root?: ClassNameValue; base?: ClassNameValue; }

事件

事件类型
失焦

[payload: Event]

改变

[payload: Event]

update:modelValue

[value: string[] | number[]]

完成

[value: string[] | number[]]

可访问属性

通过模板引用访问组件时，您可以使用以下内容：

名称类型
inputsRefRef<ComponentPublicInstance[]>

主题

app.config.ts
export default defineAppConfig({
  ui: {
    pinInput: {
      slots: {
        root: 'relative inline-flex items-center gap-1.5',
        base: [
          'rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
          'transition-colors'
        ]
      },
      variants: {
        size: {
          xs: {
            base: 'size-6 text-xs'
          },
          sm: {
            base: 'size-7 text-xs'
          },
          md: {
            base: 'size-8 text-sm'
          },
          lg: {
            base: 'size-9 text-sm'
          },
          xl: {
            base: 'size-10 text-base'
          }
        },
        variant: {
          outline: 'text-highlighted bg-default ring ring-inset ring-accented',
          soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
          subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
          ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
          none: 'text-highlighted bg-transparent'
        },
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        highlight: {
          true: ''
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
        },
        {
          color: 'primary',
          highlight: true,
          class: 'ring ring-inset ring-primary'
        },
        {
          color: 'neutral',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
        },
        {
          color: 'neutral',
          highlight: true,
          class: 'ring ring-inset ring-inverted'
        }
      ],
      defaultVariants: {
        size: 'md',
        color: 'primary',
        variant: 'outline'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        pinInput: {
          slots: {
            root: 'relative inline-flex items-center gap-1.5',
            base: [
              'rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
              'transition-colors'
            ]
          },
          variants: {
            size: {
              xs: {
                base: 'size-6 text-xs'
              },
              sm: {
                base: 'size-7 text-xs'
              },
              md: {
                base: 'size-8 text-sm'
              },
              lg: {
                base: 'size-9 text-sm'
              },
              xl: {
                base: 'size-10 text-base'
              }
            },
            variant: {
              outline: 'text-highlighted bg-default ring ring-inset ring-accented',
              soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
              subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
              ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
              none: 'text-highlighted bg-transparent'
            },
            color: {
              primary: '',
              secondary: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            },
            highlight: {
              true: ''
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
            },
            {
              color: 'primary',
              highlight: true,
              class: 'ring ring-inset ring-primary'
            },
            {
              color: 'neutral',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
            },
            {
              color: 'neutral',
              highlight: true,
              class: 'ring ring-inset ring-inverted'
            }
          ],
          defaultVariants: {
            size: 'md',
            color: 'primary',
            variant: 'outline'
          }
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      ui: {
        pinInput: {
          slots: {
            root: 'relative inline-flex items-center gap-1.5',
            base: [
              'rounded-md border-0 placeholder:text-dimmed text-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
              'transition-colors'
            ]
          },
          variants: {
            size: {
              xs: {
                base: 'size-6 text-xs'
              },
              sm: {
                base: 'size-7 text-xs'
              },
              md: {
                base: 'size-8 text-sm'
              },
              lg: {
                base: 'size-9 text-sm'
              },
              xl: {
                base: 'size-10 text-base'
              }
            },
            variant: {
              outline: 'text-highlighted bg-default ring ring-inset ring-accented',
              soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
              subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
              ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
              none: 'text-highlighted bg-transparent'
            },
            color: {
              primary: '',
              secondary: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            },
            highlight: {
              true: ''
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary'
            },
            {
              color: 'primary',
              highlight: true,
              class: 'ring ring-inset ring-primary'
            },
            {
              color: 'neutral',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
            },
            {
              color: 'neutral',
              highlight: true,
              class: 'ring ring-inset ring-inverted'
            }
          ],
          defaultVariants: {
            size: 'md',
            color: 'primary',
            variant: 'outline'
          }
        }
      }
    })
  ]
})
为便于阅读，compoundVariants 中的某些颜色已省略。请在 GitHub 上查看源代码。

Pagination

用于在页面之间导航的按钮或链接列表。

Popover

一个非模态对话框，围绕触发元素浮动。