VUE中input框去除自动填充密码下拉菜单方法

浏览器是有自动填充密码功能的,但是某些场景我们是不需要这个功能的,所以自动填充反而成为了累赘
在我的项目中我就不希望登录页和修改密码页有这个功能,所以得想办法去除
实际测试中网上搜索到的 autocomplete="off" 和 写一个隐藏的input框并不能解决问题
为此几经尝试,封装了一个基于iview的vue组件来解决这个问题,原理很简单,我就不作解释了
直接上代码

<template lang="pug">
  div
    input(type='text' style='display:none')
    Input(name="password" :type="inputType" :readonly="readonly" @on-focus="readonlyHandler" @on-change="inputHandler" clearable :value="password" :placeholder="placeholder" autocomplete='new-password')
      Icon(v-if="icon" :type="icon" slot="prepend")
</template>

<script>
export default {
  name: 'InputPassWord',
  model: [
    {
      prop: 'password',
      event: 'input'
    }
  ],
  props: {
    password: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      inputText: '',
      readonly: true,
      inputType: 'text'
    }
  },
  methods: {
    inputHandler: function (e) {
      this.inputText = e.target.value
      this.$emit('input', e.target.value)
      this.inputType = 'password'
      if (e.target.value === '') {
        this.inputType = 'text'
        this.readonlyHandler()
      }
    },
    readonlyHandler: function () {
      this.readonly = true
      let timer = setTimeout(() => {
        clearTimeout(timer)
        this.readonly = false
      }, 0)
    }
  }
}
</script>

父组件直接用就行了:

<inputPassWord v-model="loginForm.password" ></inputPassWord>

如果有朋友有其他更简单的方法,欢迎指教