背景

接口没有返回账号、密码信息,但是打开表单后,自动填充了浏览器存储的账号密码。
请添加图片描述

原因分析

在使用Ant Design(通常简写为a-),特别是a-input-password组件时,如果遇到Chrome等浏览器的自动填充功能干扰了你的设计或用户体验。

解决方案

  1. 添加 autocomplete="new-password"
    <a-input-password 
      autocomplete="new-password"
      v-model:value="password"
    />
    
  2. 使用readonly属性配合事件处理,防止初始自动填充:
    <a-input-password 
      readonly
      @focus="e => e.target.removeAttribute('readonly')"
      v-model:value="password"
    />
    

更多推荐