Lzh on GitHub

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)

使用 type prop 更改输入类型。默认为 text。

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

遮罩 (Mask)

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

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

OTP

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

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

长度 (Length)

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

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

占位符 (Placeholder)

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

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

颜色 (Color)

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

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

变体 (Variant)

使用 variant prop 更改 PinInput 的变体。

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

尺寸 (Size)

使用 size prop 更改 PinInput 的尺寸。

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

禁用 (Disabled)

使用 disabled prop 禁用 PinInput。

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

API

Props

Prop Default Type
as

'div'

any

The element or component this component should render as.

color

'primary'

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

variant

'outline'

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

size

'md'

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

length

5

string | number

The number of input fields.

autofocus

boolean

autofocusDelay

0

number

highlight

boolean

defaultValue

(string[] | number[])[]

The default value of the pin inputs when it is initially rendered. Use when you do not need to control its checked state.

modelValue

null | string[] | number[]

The controlled checked state of the pin input. Can be binded as v-model.

type

'text'

"number" | "text"

Input type for the inputs.

disabled

boolean

When true, prevents the user from interacting with the pin input

mask

boolean

When true, pin inputs will be treated as password.

placeholder

string

The placeholder character to use for empty pin-inputs.

required

boolean

When true, indicates that the user must set the value before the owning form can be submitted.

name

string

The name of the field. Submitted with its owning form as part of a name/value pair.

id

string

Id of the element

otp

boolean

When true, mobile devices will autodetect the OTP from messages or clipboard, and enable the autocomplete field.

ui

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

Emits

Event Type
blur

Event

complete

string[] | number[]

change

Event

update:modelValue

string[] | number[]

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

NameType
inputsRefRef<ComponentPublicInstance[]>

Theme

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

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