在使用vant框架的密碼輸入框時，眼睛圖標為什麼會消失？如何解決？

Vue3 Vant密碼輸入框自定義顯示/隱藏密碼圖標

在使用Vue3和Vant框架開發時，您可能會遇到Vant密碼輸入框自帶密碼顯示/隱藏功能缺失或顯示異常的問題。 這通常是因為瀏覽器默認的密碼輸入框樣式與Vant組件樣式衝突導致的。 解決方法是自定義密碼顯示/隱藏功能，並隱藏瀏覽器默認的圖標。

問題描述：Vant密碼輸入框在第一次聚焦時顯示密碼顯示/隱藏圖標（瀏覽器默認圖標），但失去焦點後再聚焦，圖標消失。

解決方法：使用CSS隱藏瀏覽器默認圖標，並使用Vant提供的v-model和自定義邏輯控制密碼的顯示/隱藏。

CSS代碼(隱藏瀏覽器默認圖標):

 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組件代碼(示例，需根據實際情況調整):

<template>
  <div>
    <input type="password" v-model="password" :type="showPassword ? 'text' : 'password'">
    <van-icon name="eye"></van-icon>
  </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組件創建一個自定義的密碼顯示/隱藏圖標，並通過v-model和showPassword變量動態控制輸入框的type屬性，實現密碼的顯示和隱藏。 記住將上述CSS代碼添加到您的項目樣式表中。 此方案避免了與瀏覽器默認樣式的衝突，並提供更一致的用戶體驗。

以上是在使用vant框架的密碼輸入框時，眼睛圖標為什麼會消失？如何解決？的詳細內容。更多資訊請關注PHP中文網其他相關文章！