Vue3 取消密码输入框在浏览器中自动回填
浏览器默认会对用户提交表单行为进行监控，若发现type属性值为password的input控件，且该控件可见时，会提示用户是否记住密码
VUE3登录禁止浏览器记住密码_vue3禁止chome浏览器提示保存密码-CSDN博客
项目需求：
前端禁止在浏览器cookie或lockstorage中存储密码，密码仅在登录人工输入使用后清除本地记录
说人话就是：别让下面图中这个框框弹出来
解决：
这边经过查阅各网站资料也是解决了，借鉴了vue 登陆禁止弹出保存密码框及禁止默认填充密码_vue浏览器密码输入提示怎么关闭-CSDN博客主要思路就是把输入框的type属性由password改变为text
简单总结如下：
模版部分
<el-form-item label="密码" prop="keyword">
<el-input
:ref="passwordRef"
:type="passwordType"
:class="pwdClass == true ? 'no-autofill-pwd' : 'no-auto'"
v-model="form.keyword"
placeholder="请输入密码"
>
<template #suffix>
<el-icon class="el-input__icon" style="cursor: pointer" @click="showPwd"
><Hide v-if="passwordType === 'text'" /> <View v-else
/></el-icon>
</template>
</el-input>
</el-form-item>js部分
import { Hide, View } from '@element-plus/icons-vue'
let passwordType = ref('text')
let pwdClass = ref(true)
let passwordRef = ref()
const showPwd = () => {
if (passwordType.value === 'text') {
passwordType.value = ''
pwdClass.value = false
} else {
pwdClass.value = true
passwordType.value = 'text'
}
// nextTick(() => {
passwordRef.value.focus()
// })
}css部分(控制输入内容的值和“·”的切换)
.no-autofill-pwd {
-webkit-text-security: disc !important;
}
.no-auto {
-webkit-text-security: none !important;
}