Vantフレームのパスワード入力ボックスを使用するとき、なぜ目のアイコンが消えるのですか？それを解決する方法は？

VUE3 VANTパスワード入力ボックスカスタムディスプレイ/パスワードアイコンを非表示

VUE3およびVANTフレームワークを使用して開発する場合、独自のパスワード表示/非表示関数を使用して、Vant Password入力ボックスの欠落または異常な表示の問題に遭遇する可能性があります。これは通常、ブラウザのデフォルトのパスワード入力ボックススタイルがVantコンポーネントスタイルと競合することによって引き起こされます。解決策は、パスワードの表示/非表示機能をカスタマイズし、ブラウザのデフォルトアイコンを非表示にすることです。

問題の説明：VANTパスワード入力ボックスは、最初のフォーカスがフォーカスされたときにパスワード表示/非表示アイコン（ブラウザのデフォルトアイコン）を表示しますが、フォーカスを失った後、アイコンは消えます。

回避策：CSSを使用してブラウザのデフォルトアイコンを非表示にし、Vantとカスタムロジックが提供するv-modelを使用して、パスワードの表示/非表示を制御します。

CSSコード（ブラウザの非表示デフォルトアイコン）：

 input [type = "password"] :: -webkit-toggle-password { /*chrome* /
  -Webkit-Appearance：なし！重要;
  ディスプレイ：なし！重要。
}
input [type = "password"] ::-moz-ui-password { /*firefox* /
  -Moz-Appearance：なし！重要;
  ディスプレイ：なし！重要。
}
input [type = "password"] :: -ms-reveal { /*edge* /
  ディスプレイ：なし！重要。
}

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コードをプロジェクトStyleSheetに追加することを忘れないでください。このソリューションは、ブラウザのデフォルトスタイルとの競合を回避し、より一貫したユーザーエクスペリエンスを提供します。

以上がVantフレームのパスワード入力ボックスを使用するとき、なぜ目のアイコンが消えるのですか？それを解決する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。