PasswordInput 密码输入框

输入密码的输入框，可以切换明文显示。

<script setup lang="ts">
  import { PasswordInput } from '@hina-ui/vue'
</script>

<template>
  <PasswordInput
    model-value="hoshimi-shion"
    aria-label="密码"
    autocomplete="current-password"
    class="w-64"
  />
</template>

vue

用法

import { PasswordInput } from '@hina-ui/vue'

密码输入框在输入区末尾带一个切换明文与密文的按钮，v-model 绑定文本。未声明的属性都会传给 input，应当传入 autocomplete：登录用 current-password，注册与修改密码用 new-password。

<script setup lang="ts">
  import { ref } from 'vue'
  import { PasswordInput } from '@hina-ui/vue'

  const password = ref('')
</script>

<template>
  <PasswordInput
    v-model="password"
    aria-label="密码"
    placeholder="密码"
    autocomplete="current-password"
    class="w-64"
  />
</template>

vue

示例

可见性

visible 决定是否显示明文，支持 v-model:visible。两个输入框共用同一个值时会一起切换。

<script setup lang="ts">
  import { ref } from 'vue'
  import { PasswordInput, Stack } from '@hina-ui/vue'

  const password = ref('')
  const confirm = ref('')
  const visible = ref(false)
</script>

<template>
  <Stack class="w-64">
    <PasswordInput
      v-model="password"
      v-model:visible="visible"
      aria-label="新密码"
      placeholder="新密码"
      autocomplete="new-password"
    />
    <PasswordInput
      v-model="confirm"
      v-model:visible="visible"
      aria-label="确认密码"
      placeholder="确认密码"
      autocomplete="new-password"
    />
  </Stack>
</template>

vue

尺寸

三档尺寸与输入框相同。

<script setup lang="ts">
  import { PasswordInput, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-64">
    <PasswordInput size="sm" model-value="hoshimi" aria-label="小号" />
    <PasswordInput size="md" model-value="hoshimi" aria-label="中号" />
    <PasswordInput size="lg" model-value="hoshimi" aria-label="大号" />
  </Stack>
</template>

vue

形态

primary 带边框、背景与阴影；secondary 使用浅色背景；bare 背景透明，不绘制边框、阴影、悬停底色或容器聚焦环，尺寸与内边距仍由原有设置控制。

bare 保留禁用状态与 aria-invalid；错误信息可由 FormField 显示。附属按钮保留自身的悬停与键盘聚焦反馈。

<script setup lang="ts">
  import { PasswordInput, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-full max-w-xs">
    <PasswordInput variant="primary" aria-label="primary" model-value="hoshimi" />
    <PasswordInput variant="secondary" aria-label="secondary" model-value="hoshimi" />
    <PasswordInput variant="bare" aria-label="bare" model-value="hoshimi" />
  </Stack>
</template>

vue

状态

invalid 标出校验未通过，disabled 不可编辑。

<script setup lang="ts">
  import { PasswordInput, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-64">
    <PasswordInput invalid model-value="123456" aria-label="校验未通过" />
    <PasswordInput disabled model-value="hoshimi" aria-label="已禁用" />
  </Stack>
</template>

vue

在表单中

放进 FormField 后，标签指向输入框，说明与错误信息由字段渲染；校验规则与提交交给 Form。两次输入是否一致这类跨字段的规则写在对象层，再指定错误落在哪个字段。

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import * as v from 'valibot'
  import { Button, Form, FormField, PasswordInput, Text } from '@hina-ui/vue'

  const schema = v.pipe(
    v.object({
      password: v.pipe(
        v.string('请输入密码'),
        v.minLength(8, '密码至少 8 位'),
        v.regex(/[0-9]/, '密码需要包含数字'),
      ),
      confirm: v.string('请再次输入密码'),
    }),
    v.forward(
      v.check(input => input.password === input.confirm, '两次输入的密码不一致'),
      ['confirm'],
    ),
  )

  const values = reactive({ password: '', confirm: '' })
  const saved = ref(false)

  async function save() {
    await new Promise(resolve => setTimeout(resolve, 600))
    saved.value = true
  }
</script>

<template>
  <Form v-slot="{ submitting }" :values="values" :rules="schema" class="w-80" @submit="save">
    <FormField name="password" label="新密码" description="至少 8 位，包含数字" required>
      <PasswordInput v-model="values.password" />
    </FormField>
    <FormField name="confirm" label="确认密码" required>
      <PasswordInput v-model="values.confirm" />
    </FormField>
    <Button type="submit" :loading="submitting" class="self-start">修改密码</Button>
    <Text v-if="saved" tone="muted" size="sm">密码已修改。</Text>
  </Form>
</template>

vue

行为

点击切换按钮不会让输入区失焦，切换后可以继续输入。
切换只改变显示方式，不改变值。
悬停、聚焦、错误与禁用的表现与 Input 相同。

API

Props

属性	类型	默认值	说明
`modelValue`	`string`	—	文本
`visible`	`boolean`	`false`	是否显示明文，支持 `v-model:visible`
`variant`	`'primary' \| 'secondary' \| 'bare'`	`'primary'`	形态
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`invalid`	`boolean`	`false`	是否校验未通过
`disabled`	`boolean`	`false`	是否禁用
`class`	`string`	—	追加至根元素的类名

事件	参数	说明
`update:modelValue`	`value: string`	文本变化
`update:visible`	`visible: boolean`	可见性变化

用法

示例

可见性

尺寸

形态

状态

在表单中

行为

无障碍

API

Props