浏览器默认会对用户提交表单行为进行监控,若发现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 = truepasswordType.value = 'text'}// nextTick(() => {passwordRef.value.focus()// })
}
css部分(控制输入内容的值和“·”的切换)
.no-autofill-pwd {-webkit-text-security: disc !important;
}
.no-auto {-webkit-text-security: none !important;
}