Why does the eye icon disappear when using the password input box of the vant frame? How to solve it?

Vue3 Vant password input box custom display/hide password icon

When developing with Vue3 and Vant frameworks, you may encounter problems with missing or abnormal display of the Vant password input box with its own password display/hide function. This is usually caused by the browser's default password input box style conflicts with the Vant component style. The solution is to customize the password display/hide function and hide the browser's default icon.

Problem Description: The Vant password input box displays the password display/hide icon (browser default icon) when the first focus is focused, but after losing focus, the icon disappears.

Workaround: Use CSS to hide the browser default icon and use v-model provided by Vant and custom logic to control the display/hide of passwords.

CSS code (hide browser default icon):

 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 component code (example, need to be adjusted according to actual situation):

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

This code uses Vant's van-icon component to create a custom password display/hide icon, and dynamically controls type attribute of the input box through v-model and showPassword variables to realize the display and hiding of the password. Remember to add the above CSS code to your project stylesheet. This solution avoids conflicts with the browser's default style and provides a more consistent user experience.

The above is the detailed content of Why does the eye icon disappear when using the password input box of the vant frame? How to solve it?. For more information, please follow other related articles on the PHP Chinese website!