vue input输入框取消账号密码提示

最新推荐文章于 2024-09-26 10:20:20 发布

莫及雨

最新推荐文章于 2024-09-26 10:20:20 发布

阅读量2.2k

点赞数 3

分类专栏： bug解决方案 vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46806380/article/details/126517807

版权

vue 同时被 2 个专栏收录

9 篇文章

订阅专栏

bug解决方案

5 篇文章

订阅专栏

本文介绍了一种在Vue项目中使用iviewUI或element-ui组件库时，如何通过修改密码输入框的type属性来取消账号密码自动填充的方法，并提供了具体的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input输入框取消账号密码提示 #去除自动填充提示

vue项目 iview UI 或 element-ui 项目均有效
未关闭前：
在这里插入图片描述
代码实现：

<Input password placeholder="请输入密码"
    :key="pwKey"
    v-model.trim="formLock.password"
    @keyup.enter.native="handleSubmit()"
    :type="pwType"
    @input="pwInput">
</Input>

js：

data () {
    return {
      pwType: 'text', // 密码input默认属性
      pwKey: 0, // 密码key值
      formLock: {
        password: ''
      }
    }
}
methods: {
    // 修改input输入框的type属性
    pwInput (e) {
      if (e) {
        this.pwType = 'password'
      } else {
        this.pwKey++
        this.pwType = 'text'
      }
    },
    // 按钮：确认
    handleSubmit () {
    	this.$nextTick(() => {
           this.pwInput()
       }, 100)
	}
	// 取消
    handleReset () {
      this.formLock.password = ''
      this.$nextTick(() => {
        this.pwInput()
      })
    },