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

原代码（密码框是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-elseref="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框就自动失焦了，但如果再次聚焦就可以连续输入了。

根本原因分析

1. 当密码清空时，组件从密码类型切换到文本类型（重新渲染）

2. 输入第一个字符时触发 v-model 更新，值不为空又切换回密码类型（再次重新渲染）

3. 每次重新渲染都会导致焦点丢失。

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

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