禁止浏览器自动填充密码和记住密码

需求：登陆账号成功后浏览器不提示记住密码， 登陆账号时，密码不能自动填充。

思路：
点击登录的按钮，不要放在a-form或el-form之内，否则浏览器会提示记住密码。

不再使用密码框，使用普通input，再输入密码时，添加字体将输入的密码显示···。刚方案使用了下载的dotsfont字体，但是该字体只对数字和英文有效，汉字无效。故不适用。

表单中如果使用type="password"的输入框，当鼠标focus时，就会弹出自动填充密码的弹框。
所以，先使用普通的输入框input，当输入密码时切换到password输入框。

1. 先使用input，防止已经记住密码，一打开页面就自动填充

<a-form-item name="passwordName">
        <a-input v-if="!inputPwdToggle" show-password v-model:value.trim="inputPwdText" ref="InputPwdRef" @change="changeInputPwd(true)" placeholder="请输入" size="large" autocomplete="off">
          <template #prefix>
            <lock-outlined />
          </template>
        </a-input>
        <a-input-password  v-model:value.trim="form.passwordName" ref="pwdRef" :class="!form.passwordName?'pwdPos':''" placeholder="请输入" size="large"  autocomplete="new-password">
          <template #prefix>
            <lock-outlined />
          </template>
        </a-input-password>
</a-form-item>

2. 设置autocomplete="new-password"。否则当鼠标focus时，就会弹出自动填充密码的弹框。

3. 输入密码时切换至密码框，密码框内容全部删除时切换至普通input。鼠标应focus到当前的输入框。

点击查看代码

import { defineComponent, onMounted, reactive, ref, nextTick, watch } from 'vue'
setup() {
    const inputPwdText = ref('')
    const inputPwdToggle = ref(false)
    const changeInputPwd =(bool)=>{
      inputPwdToggle.value = bool
      if(bool){
        form.passwordName = inputPwdText.value
        nextTick(() => {
          pwdRef.value.focus()
        });
      }
    }
    const changeUser =(account)=>{
      if(!account) {
        form.passwordName = ''
        inputPwdText.value = ''
        changeInputPwd(false)
      }
    }
    let pwdRef = ref();
    let InputPwdRef = ref();
    watch(() => form.passwordName, (newVal, oldVal) => {
      if(!newVal) {
        changeInputPwd(false)
        inputPwdText.value = ''
        if(form.account){
          nextTick(() => {
            InputPwdRef.value.focus()
          });
        }
      }
    })
}

4. 输入密码时切换至密码框，鼠标应focus到当前的输入框时，弹出自动填充密码框。设置display:none;不起作用。给密码框设置定位，定位到页面以外，看不到即可。

.pwdPos {
  position: fixed;
  top: -800px;
}