Password

密碼欄位顯示密碼強度指示器。

導入 # 


import Password from 'primevue/password';

基本 #

密碼使用 v-model 屬性進行雙向值綁定。


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

表單 #

InputText 使用 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 文件以取得更多資訊。


<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>

Ifta 標籤 #

IftaLabel 用於建立內嵌頂部對齊的標籤。請瀏覽 IftaLabel 文件以取得更多資訊。


<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" />

輔助功能 #

螢幕閱讀器

描述元件的值可以透過與 id prop 結合的 label 標籤提供，或使用 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如果已開啟，則隱藏強度儀表。
PrimeVue 4.2.5 on Vue 3 by PrimeTek