PinInput

GitHub
用于输入 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 prop 来改变输入类型。默认为 text。

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

遮罩

使用 mask prop 将输入视为密码。

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

OTP

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

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

长度

使用 length prop 来改变输入框的数量。

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

占位符

使用 placeholder prop 来设置占位文本。

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

颜色

使用 color prop 来改变 PinInput 聚焦时的环形颜色。

<template>
  <UPinInput color="neutral" highlight placeholder="○" />
</template>
highlight prop 在此处用于显示聚焦状态。它在内部用于发生验证错误时。

变体

使用 variant prop 来改变 PinInput 的变体。

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

尺寸

使用 size prop 来改变 PinInput 的尺寸。

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

禁用

使用 disabled prop 来禁用 PinInput。

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

API

Props

Prop默认值类型
as

'div'

any

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

颜色

'primary'

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

变体

'outline'

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

尺寸

'md'

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

长度

5

string | number

输入字段的数量。

autofocus

boolean

autofocusDelay

0

数字

高亮

boolean

modelValue

null | string[]

PIN 输入框受控的选中状态。可以通过 v-model 绑定。

defaultValue

string[]

PIN 输入框在初次渲染时的默认值。当你不需要控制其选中状态时使用。

类型

'text'

"number" | "text"

输入框的输入类型。

禁用

boolean

当 true 时，阻止用户与 PIN 输入框交互。

id

string

元素的 ID

遮罩

boolean

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

name

string

字段的名称。与其所属表单一起作为名称/值对提交。

OTP

boolean

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

占位符

string

用于空 PIN 输入框的占位符字符。

required

boolean

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

ui

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

Emits

事件类型
blur

[payload: Event]

change

[payload: Event]

update:modelValue

[value: string[]]

complete

[value: string[]]

当通过模板引用 (template ref) 访问组件时，你可以使用以下内容

名称类型
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 上查看源代码。

分页

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

气泡框

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