Mengapa ikon mata hilang apabila menggunakan kotak input kata laluan bingkai vant? Bagaimana menyelesaikannya?

Vue3 Vant Kata Laluan Input Kotak Custom Paparan/Sembunyikan Ikon Kata Laluan

Apabila membangunkan dengan VUE3 dan Vant Frameworks, anda mungkin menghadapi masalah dengan paparan yang hilang atau tidak normal dari kotak input kata laluan Vant dengan fungsi paparan kata laluan/menyembunyikannya sendiri. Ini biasanya disebabkan oleh gaya kotak input kata laluan lalai pelayar yang bertentangan dengan gaya komponen Vant. Penyelesaiannya adalah untuk menyesuaikan fungsi paparan/menyembunyikan kata laluan dan menyembunyikan ikon lalai penyemak imbas.

Penerangan Masalah: Kotak Input Kata Laluan Vant memaparkan ikon paparan kata laluan/menyembunyikan ikon lalai pelayar) apabila tumpuan pertama difokuskan, tetapi selepas kehilangan fokus, ikon itu hilang.

Penyelesaian: Gunakan CSS untuk menyembunyikan ikon lalai penyemak imbas dan gunakan v-model yang disediakan oleh Vant dan Logik Custom untuk mengawal paparan/menyembunyikan kata laluan.

Kod CSS (Sembunyikan ikon lalai penyemak imbas):

 input [type = "password"] ::-WebKit-toggle-Password { /*Chrome* /
  -Webkit-appearing: Tiada! Penting;
  Paparan: Tiada! Penting;
}
input [type = "password"] ::-moz-ui-password { /*firefox* /
  -Moz-Penampilan: Tiada! Penting;
  Paparan: Tiada! Penting;
}
input [type = "kata laluan"] ::-ms-reveal { /*edge* /
  Paparan: Tiada! Penting;
}

Kod Komponen Vue (contohnya, perlu diselaraskan mengikut keadaan sebenar):

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

Kod ini menggunakan komponen van-icon Vant untuk membuat ikon paparan kata laluan tersuai/menyembunyikan ikon, dan secara dinamik mengawal atribut type kotak input melalui pembolehubah v-model dan showPassword untuk merealisasikan paparan dan menyembunyikan kata laluan. Ingat untuk menambah kod CSS di atas ke lembaran gaya projek anda. Penyelesaian ini mengelakkan konflik dengan gaya lalai penyemak imbas dan memberikan pengalaman pengguna yang lebih konsisten.

Atas ialah kandungan terperinci Mengapa ikon mata hilang apabila menggunakan kotak input kata laluan bingkai vant? Bagaimana menyelesaikannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!