


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!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

ArtGPT
AI image generator for creative art from text prompts.

Stock Market GPT
AI powered investment research for smarter decisions

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Data from specific websites in Google Chrome can be accurately cleared through site settings. First, visit the target website, click the lock icon in the address bar to enter "Website Settings", and select "Clear Data" to delete its cookies and cache; if you cannot access the website, you can enter Chrome Settings → Privacy and Security → Site Settings → View all site data, and manually delete it after searching for the domain name; you can also directly locate and clear specific site data by entering the shortcut of chrome://settings/siteData?searchTerms= to achieve efficient and accurate management.

First, uninstall the main program through the system settings, and then use 360's own uninstall tool to clean the residue; then manually delete %AppData%, %LocalAppData% and related folders in the installation directory; then enter the registry editor for backup and clear the 360-related items in HKEY_CURRENT_USER and HKEY_LOCAL_MACHINE; then use third-party tools such as GeekUninstaller to deeply scan the residue; finally repeat the above steps in safe mode to ensure complete clearance.

Chrome provides built-in security checking, which automatically compares saved passwords with known leaked databases. Users can perform security checks through the "Security" option in the settings. If a leaked password is found, a red warning will be displayed and they can be directly redirected to the password-changing page. Additionally, when viewing a specific account manually in the Password Manager, a risky password will mark an exclamation mark. In order to achieve continuous protection, it is recommended to enable "Password Breach Notification". When a new leak occurs, the system will actively push an alarm to remind users to modify their passwords in time and enable two-factor verification to ensure the security of their account.

With the continuous growth of the number of Windows 10 users, more and more users have encountered various problems during use. Among them, the situation where the control panel is displayed as blank has troubled many users. Here are some solutions that I hope will help you! Solution to the problem of blank Windows 10 control panel: 1. First, press the Win R key combination to open the run window, enter "regedit" in the pop-up dialog box, and then click OK to open the registry editor. 2. In the Registry Editor, expand the following paths in turn: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Ex

Recently, when using Windows 10 system, I found that when using the Edge browser to click on the address bar, the troublesome "popular sites" always pop up. To solve this problem, this article will introduce you to how to remove popular sites in the Edge browser address bar in Windows 10. Next are the specific operation steps. Operation steps: Start Edge browser, find the relevant options in the settings interface (as shown in the figure below), and change its default open page to "Blank Page". How to turn off Win10Edge Click the address bar to display popular sites. If the option of blank pages is not provided in the system, you need to reset the Edge browser. You can see this option after resetting it. The specific reset steps are as follows:

1. Clear the cache and cookies and restart the browser; 2. Reset the 360 browser to the default settings; 3. Add the Alipay domain name to the trusted site and restore the security level; 4. Temporarily close the firewall or add Alipay to the whitelist; 5. Change the browser or use the mobile app to log in.

You can manage form records in Wukong browser by setting clear form data, manually deleting specific entries, or disabling the autofill feature to ensure privacy and accuracy.

First, turn off the global permissions of Chrome microphone, then set up a block list for specific websites, clear existing authorization records, and disable Chrome microphone access at the system level to enhance privacy protection.
