关于elementui和ant design vue无法禁止浏览器自动填充问题

以and design vue 为例:

图标用来显隐账号密码

html:

复制代码
 <a-form-model-item label="账号密码:" prop="password">
                  <a-input v-if="passwordTab" ref="passwordInput" v-model="form.password" type="text" style="width: 280px" @input="inputPassword">
                    <template #suffix>
                      <svg-icon v-if="!passwordTab" class="icons-dg" style="color: rgba(0, 0, 0, 0.65)" iconClass="dg-nosee" @click="changeVent('passwordTab',true)" />
                      <i v-else class="el-icon-view icons-dg" @click="changeVent('passwordTab',false)" />
                    </template>
                  </a-input>
                  <a-input v-else ref="passwordInput" v-model="password" type="text" style="width: 280px" @input="inputPassword">
                    <template #suffix>
                      <svg-icon v-if="!passwordTab" class="icons-dg" style="color: rgba(0, 0, 0, 0.65)" iconClass="dg-nosee" @click="changeVent('passwordTab',true)" />
                      <i v-else class="el-icon-view icons-dg" @click="changeVent('passwordTab',false)" />
                    </template>
                  </a-input>
                </a-form-model-item>

js:

会生成*号字符串并把原值v-model赋值给form.password表单。自行修改,我这边的表单结构是:

form:{ password,...[more]}

复制代码
    inputPassword(e) {
      const value = e.target.value // 当前的值
      const oldVal = this.form.password // 之前的值
      let passwordShow = '' // 当前输入下需要显示的值,及n个*的字符串
      let text = '' // 当前input事件输入的值,如果是删除就没有值
      // 当前input指针的位置,不一定是在最后
      const startPoint = e.target.selectionStart
      const endPoint = e.target.selectionEnd
      if (!value) {
        this.form.password = ''
        this.password = ''
        return
      }
      let leftNum = 0 // 输入后左边保留多少
      let rightNum = 0 // 输入后右边保留多少
      let isLeft = true
      for (let i = 0; i < value.length; i++) {
        passwordShow += '*'
        if (value[i] == '*') {
          if (isLeft) {
            leftNum++
          } else {
            rightNum++
          }
          continue
        }
        text += value[i]
        isLeft = false
      }

      if (text) {
        this.form.password =
          oldVal.slice(0, leftNum) +
          text +
          oldVal.slice(oldVal.length - rightNum)
      } else {
        this.form.password =
          oldVal.slice(0, startPoint) +
          oldVal.slice(oldVal.length - leftNum - rightNum + startPoint)
      }
      this.password = passwordShow
      this.$nextTick(() => {
        e.target.setSelectionRange(startPoint, startPoint)
      })
    },

这个是把显示隐藏账号密码做个false和true处理

复制代码
 changeVent(type, val) {
      this[type] = val
    },

data对象:

复制代码
data(){
    return{
      passwordTab: false,
      password: '',
      form:{
      password:''
}
}
}

效果:

相关推荐
Moment8 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
爱敲代码的小鱼8 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax
吹牛不交税9 小时前
admin.net-v2 框架使用笔记-netcore8.0/10.0版
vue.js·.netcore
MZ_ZXD00110 小时前
springboot旅游信息管理系统-计算机毕业设计源码21675
java·c++·vue.js·spring boot·python·django·php
铅笔侠_小龙虾10 小时前
Flutter 实战: 计算器
开发语言·javascript·flutter
大模型玩家七七11 小时前
梯度累积真的省显存吗?它换走的是什么成本
java·javascript·数据库·人工智能·深度学习
2501_9447114311 小时前
JS 对象遍历全解析
开发语言·前端·javascript
发现一只大呆瓜11 小时前
虚拟列表:支持“向上加载”的历史消息(Vue 3 & React 双版本)
前端·javascript·面试
阔皮大师12 小时前
INote轻量文本编辑器
java·javascript·python·c#
lbb 小魔仙12 小时前
【HarmonyOS实战】React Native 表单实战:自定义 useReactHookForm 高性能验证
javascript·react native·react.js