vue支付密码插件实现（可解决浏览器记住密码行为）

• 浏览器自动填充和记住密码行为是前端遇到最为头疼的问题之一，浏览器只要检查到password input框，就会匹配离他最近的text input框，autocomplete属性虽能解决自动填充的问题，但是也是支持有限，不能解决浏览器记住密码行为和提示密码行为

• 要解决这种问题，可以从password input框入手，只要改变 input框的类型为text就可以解决此问题

  第一种：设置样式

  设置input 类型为text后，给此input设置样式-webkit-text-security:disc即可，但是，这种样式兼容性不好，只支持以下浏览器版本
  

  第二种：模拟密码框

  思路很简单，真实input为text的框输入并隐藏，相同位置展示密码圆点
  
  看代码：
  html

  <div class="input">
      <span class="password1" @click="setTimer">
          <span class="iconfont" v-for="i in password.length" :key="i"></span>
          <!-- 模拟光标 -->
          <span v-show="isFocus" class="focusIcon"></span>
      </span>
      <input type="text" class="password" ID="txtPassword" MaxLength="26" v-model="password" autofocus
        @click="setTimer">
      <!-- 光标之外点击蒙层 -->
      <div class="maskClick" @click="clearFocus"></div>
    </div>
  

  css

  .iconfont {
    display: inline-block;
    height: 7px;
    width: 7px;
    margin-right: 2px;
    border-radius: 50%;
    background-color: #333;
  }
  #txtPassword {
    opacity: 0;
  }
  input {
    width: 220px;
    padding-left: 10px;
    padding-top: 3px;
    background: #fcfcfc;
    height: 38px;
    line-height: 43px;
    font-size: 18px;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
  }
  div.input {
    position: relative;
  }
  div.input input {
    position: absolute;
    left: 0;
    z-index: 22;
  }
  .maskClick {
    width: 500px;
    height: 500px;
    position: absolute;
    top: -125px;
    left: -125px;
    z-index: 1;
  }
  .password1 {
    position: absolute;
    left: 0;
    z-index: 22;
    width: 220px;
    height: 38px;
    line-height: 33px;
    padding-left: 10px;
    background: #fcfcfc;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
  }
  .focusIcon {
    display: inline-block;
    width: 1.5px;
    height: 20px;
    background: #606266;
    vertical-align: middle;
  }
  

  js：因为真实的input被隐藏，光标被隐藏，所以在这里模拟了光标的实现，不需要的可以省略光标部分代码

  data () {
      return {
        password: '',
        isFocus: true,
        timer: null,
        timerOut: null
      }
    },
    methods: {
      setTimer (tag) {
        const that = this
        that.clearFocus()
        setTimeout(() => {
          that.isFocus = true
        }, 400)
        that.timer = setInterval(() => {
          this.isFocus = false
          that.timerOut = setTimeout(() => {
            this.isFocus = true
          }, 1200)
        }, 800)
      },
      clearFocus () {
        window.clearInterval(this.timer)
        this.timer = null
        window.clearTimeout(this.timerOut)
        this.timerOut = null
        setTimeout(() => {
          this.isFocus = false
        }, 20)
      }
    },
    mounted () {
      this.setTimer()
    },
    beforeDestroy () {
      window.clearInterval(this.timer)
    }
  

这样就简单实现了input密码框的模拟，当然密码显示样式可以根据自己需要随时更改，大家有什么好的实现方式欢迎讨论学习