element-plus中，vue3项目，el-input密码框禁止浏览器自动弹出浏览器历史密码提示框

最新推荐文章于 2025-05-22 17:37:50 发布

原创最新推荐文章于 2025-05-22 17:37:50 发布 · 389 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

原代码（密码框是text框）：

<el-form-item label="用户名" :label-width="formLabelWidth" v-if="!localOrhuawei" prop="userName">
          <el-input v-model="formDialog.userName" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" v-if="!localOrhuawei" prop="passWord">
          <el-input v-model="formDialog.passWord" />
        </el-form-item>

现加需求：el-input改为密码框，但要求el-input密码框禁止浏览器自动弹出浏览器历史密码提示框

<el-form-item label="用户名" :label-width="formLabelWidth" v-if="!localOrhuawei" prop="userName">
          <el-input v-model="formDialog.userName" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" v-if="!localOrhuawei" prop="passWord">
          <el-input v-model="formDialog.passWord" show-password />
        </el-form-item>

效果：当密码有值时正常显示，当密码无值时就会自动弹出历史的用户密码列表弹框。

那如何不显示历史记录弹框呢？

想到通过v-if去控制显示密码框，代码如下：

<el-form-item label="密码" :label-width="formLabelWidth" v-if="!localOrhuawei" prop="passWord">
          <el-input  ref="passwordInput" v-model="formDialog.passWord" v-if="passwordType === 'password'" type="password" show-password autocomplete="new-password"/>
          <el-input 
            v-else
            ref="passwordInput"
            v-model="formDialog.passWord" 
            type="text"
            autocomplete="off"
          />
        </el-form-item>

import { reactive, ref, onMounted, watch,nextTick } from "vue";

const passwordType = ref('text');
const passwordInput = ref();

watch(
  () => formDialog.passWord,
  (nv,ov) => {
    if(!nv){
      passwordType.value = 'text'
    }else{
      passwordType.value = 'password'
    }
  }
);

效果：当清空值时，确实不会再弹出浏览器的历史记录列表了，但我发现当我输入一个数字后，input框就自动失焦了，但如果再次聚焦就可以连续输入了。

根本原因分析

当密码清空时，组件从密码类型切换到文本类型（重新渲染）
输入第一个字符时触发 v-model 更新，值不为空又切换回密码类型（再次重新渲染）
每次重新渲染都会导致焦点丢失。

解决方式：在监听值改变后，修改密码框类型后，直接聚焦即可解决问题；

watch(
  () => formDialog.passWord,
  (nv,ov) => {
    if(!nv){
      passwordType.value = 'text'
    }else{
      passwordType.value = 'password'
    }
    //切换input框类型后，重新聚焦
    nextTick(() => {
      passwordInput.value?.focus()
    })
  }
);