密码

密码为密码字段显示强度指示器。

导入 #


import Password from 'primevue/password';

基本 #

密码与 v-model 属性一起使用，用于双向值绑定。


<Password v-model="value" :feedback="false" />

表单 #

文本输入与 v-model 属性一起使用。


<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-64">
    <div class="flex flex-col gap-1">
        <Password name="password" placeholder="Password" :feedback="false" fluid />
        <template v-if="$form.password?.invalid">
            <Message v-for="(error, index) of $form.password.errors" :key="index" severity="error" size="small" variant="simple">{{ error.message }}</Message>
        </template>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

仪表 #

当输入值时，强度计将显示为弹出窗口。


<Password v-model="value" />

本地化 #

标签在组件级别通过 promptLabel、weakLabel、mediumLabel 和 strongLabel 属性进行翻译。为了对应用程序中的所有密码组件应用全局翻译，请参阅本地化。


<Password v-model="value" promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />

切换遮罩 #

当存在 toggleMask 时，将显示一个图标以将值显示为纯文本。


<Password v-model="value" toggleMask />

模板 #

包含 3 个槽位以自定义覆盖层。这些是 header、content 和 footer。请注意，内容会覆盖默认仪表。


<Password v-model="value">
    <template #header>
        <div class="font-semibold text-xm mb-4">Pick a password</div>
    </template>
    <template #footer>
        <Divider />
        <ul class="pl-2 ml-2 my-0 leading-normal">
            <li>At least one lowercase</li>
            <li>At least one uppercase</li>
            <li>At least one numeric</li>
            <li>Minimum 8 characters</li>
        </ul>
    </template>
</Password>

填充 #

将 variant 属性指定为 filled，以显示比默认的 outlined 样式具有更高视觉强调的组件。


<Password v-model="value" :feedback="false" variant="filled" />

浮动标签 #

当获得焦点时，浮动标签将显示在输入字段的顶部。有关更多信息，请访问浮动标签文档。

覆盖标签

内联标签

开启标签


<FloatLabel>
    <Password v-model="value1" inputId="over_label" />
    <label for="over_label">Over Label</label>
</FloatLabel>

<FloatLabel variant="in">
    <Password v-model="value2" inputId="in_label" variant="filled" />
    <label for="in_label">In Label</label>
</FloatLabel>

<FloatLabel variant="on">
    <Password v-model="value3" inputId="on_label" />
    <label for="on_label">On Label</label>
</FloatLabel>

内联标签 #

内联标签用于创建内联顶部对齐标签。有关更多信息，请访问内联标签文档。

密码


<IftaLabel>
    <Password v-model="value" inputId="password" variant="filled" />
    <label for="password">Password</label>
</IftaLabel>

尺寸 #

密码提供 small 和 large 尺寸作为基本尺寸的替代方案。


<div class="card flex flex-col items-center gap-4">
    <Password v-model="value1" type="text" size="small" placeholder="Small" />
    <Password v-model="value2" type="text" placeholder="Normal" />
    <Password v-model="value3" type="text" size="large" placeholder="Large" />
</div>

无效 #

无效状态使用 invalid prop 显示，以指示验证失败。在与表单验证库集成时，可以使用此样式。


<Password v-model="value1" :invalid="!value1" placeholder="Password" />
<Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />

禁用 #

当存在 disabled 时，无法编辑和聚焦该元素。


<Password disabled placeholder="Disabled" />

可访问性 #

屏幕阅读器

可以通过 label 标签与 id prop 组合，或使用 aria-labelledby、aria-label props 来提供描述组件的值。屏幕阅读器会在输入时使用具有 aria-live 的部分通知密码强度的变化。


<label for="pwd1">Password</label>
<Password inputId="pwd1" />

<span id="pwd2">Password</span>
<Password aria-labelledby="pwd2" />

<Password aria-label="Password"/>

键盘支持

键	功能
tab	将焦点移到输入框。
escape	如果打开，则隐藏强度计。

密码