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;
}

上面三块可以直接抄作业

仅做记录

原文地址：https://blog.csdn.net/a666666000/article/details/142548360

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！