.jpg)
vue3 vant密碼輸入框自定義顯示/隱藏密碼圖標(biāo)
在使用vue3和Vant框架開發(fā)時(shí)，您可能會(huì)遇到Vant密碼輸入框自帶密碼顯示/隱藏功能缺失或顯示異常的問(wèn)題。 這通常是因?yàn)?a >瀏覽器默認(rèn)的密碼輸入框樣式與Vant組件樣式?jīng)_突導(dǎo)致的。 解決方法是自定義密碼顯示/隱藏功能，并隱藏瀏覽器默認(rèn)的圖標(biāo)。
問(wèn)題描述：Vant密碼輸入框在第一次聚焦時(shí)顯示密碼顯示/隱藏圖標(biāo)（瀏覽器默認(rèn)圖標(biāo)），但失去焦點(diǎn)后再聚焦，圖標(biāo)消失。
解決方法：使用css隱藏瀏覽器默認(rèn)圖標(biāo)，并使用Vant提供的v-model和自定義邏輯控制密碼的顯示/隱藏。
CSS代碼 (隱藏瀏覽器默認(rèn)圖標(biāo)):
input[type="password"]::-webkit-toggle-password { /*chrome*/ -webkit-appearance: none!important; display: none!important; } input[type="password"]::-moz-ui-password { /*firefox*/ -moz-appearance: none!important; display: none!important; } input[type="password"]::-ms-reveal { /*edge*/ display: none!important; }
Vue組件代碼 (示例，需根據(jù)實(shí)際情況調(diào)整):
<template> <div> <input type="password" v-model="password" :type="showPassword ? 'text' : 'password'" /> <van-icon name="eye" @click="showPassword = !showPassword" /> </div> </template> <script> import { ref } from 'vue'; import { Icon } from 'vant'; export default { components: { [Icon.name]: Icon, }, setup() { const password = ref(''); const showPassword = ref(false); return { password, showPassword }; }, }; </script>
此代碼利用Vant的van-icon組件創(chuàng)建一個(gè)自定義的密碼顯示/隱藏圖標(biāo)，并通過(guò)v-model和showPassword變量動(dòng)態(tài)控制輸入框的type屬性，實(shí)現(xiàn)密碼的顯示和隱藏。 記住將上述CSS代碼添加到您的項(xiàng)目樣式表中。 此方案避免了與瀏覽器默認(rèn)樣式的沖突，并提供更一致的用戶體驗(yàn)。
? 版權(quán)聲明
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載。
THE END
.png)
