


Why does the eye icon disappear when using the password input box of the vant frame? How to solve it?
Apr 04, 2025 pm 04:09 PMVue3 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.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

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)

Hot Topics

Identifying the trend of the main capital can significantly improve the quality of investment decisions. Its core value lies in trend prediction, support/pressure position verification and sector rotation precursor; 1. Track the net inflow direction, trading ratio imbalance and market price order cluster through large-scale transaction data; 2. Use the on-chain giant whale address to analyze position changes, exchange inflows and position costs; 3. Capture derivative market signals such as futures open contracts, long-short position ratios and liquidated risk zones; in actual combat, trends are confirmed according to the four-step method: technical resonance, exchange flow, derivative indicators and market sentiment extreme value; the main force often adopts a three-step harvesting strategy: sweeping and manufacturing FOMO, KOL collaboratively shouting orders, and short-selling backhand shorting; novices should take risk aversion actions: when the main force's net outflow exceeds $15 million, reduce positions by 50%, and large-scale selling orders

The failure to register a Binance account is mainly caused by regional IP blockade, network abnormalities, KYC authentication failure, account duplication, device compatibility issues and system maintenance. 1. Use unrestricted regional nodes to ensure network stability; 2. Submit clear and complete certificate information and match nationality; 3. Register with unbound email address; 4. Clean the browser cache or replace the device; 5. Avoid maintenance periods and pay attention to the official announcement; 6. After registration, you can immediately enable 2FA, address whitelist and anti-phishing code, which can complete registration within 10 minutes and improve security by more than 90%, and finally build a compliance and security closed loop.

Binance Exchange is the world's leading cryptocurrency trading platform. The official website entrance is a designated link. Users need to access the website through the browser and pay attention to preventing phishing websites; 1. The main functions include spot trading, contract trading, financial products, Launchpad new currency issuance and NFT market; 2. To register an account, you need to fill in your email or mobile phone number and set a password. Security measures include enabling dual-factor authentication, binding your mobile email and withdrawal whitelist; 3. The APP can be downloaded through the official website or the app store. iOS users may need to switch regions or use TestFlight; 4. Customer support provides 24/7 multi-language services, and can obtain help through the help center, online chat or work order; 5. Notes include accessing only through official channels to prevent phishing

Bitcoin (BTC) is the world's first decentralized digital currency. Since its debut in 2009, it has become the leader in the digital asset market with its unique encryption technology and limited supply. For users who are following the cryptocurrency space, it is crucial to keep track of their price dynamics in real time.

Bitcoin (BTC) is the world's first decentralized digital currency, and it is also the pioneer and weather vane of the cryptocurrency market. Since its birth in 2009, its price volatility and technological innovation have attracted much attention from investors and technology enthusiasts around the world. Real-time grasp of its price trends is crucial for market participants.

Create the Modal.vue component, use the Composition API to define the props that receive modelValue and title, and use emit to trigger the update:modelValue event to achieve v-model bidirectional binding; 2. Use slot to distribute content in the template, supporting the default slot and named slot header and footer; 3. Use @click.self to close the pop-up window by clicking the mask layer; 4. Import the Modal in the parent component and use ref to control the display and hide it, and use it in combination with v-model; 5. Optional enhancements include listening to the Escape key close, adding transition animation and focus lock. This modal box component has good

To register on the Ouyi web version, you must first visit the official website and click the "Register" button. 1. Select the registration method of mobile phone number, email or third-party account, 2. Fill in the corresponding information and set a strong password, 3. Enter the verification code, complete the human-computer verification and agree to the agreement, 4. After registration, bind two-factor authentication, set the capital password and complete KYC identity verification. Notes include that mainland Chinese users need to pay attention to regulatory policies and be vigilant to impersonate customer service. In 2024, new users must complete the basic KYC before they can trade. After the above steps are completed, you can use your account safely.

Table of Contents Part 1: Stocks (ATM) Part 2: Debt (leverage) What is the growth path of a full-stack crypto reserve company? Where is the altcoin treasury reserve company? Summary?What is the goal of a Bitcoin treasury reserve company? It is to increase the proportion of Bitcoin per share, that is, the ratio between the total amount of Bitcoin held by the company and the number of shares completely diluted by the company. Microstrategy companies are not trying to seize opportunities and earn US dollar earnings through Bitcoin trading. Their only focus is on increasing Bitcoin per share (BPS) by increasing the proportion of Bitcoin per share in an increased way. We call
