【Vue组件】禁止浏览器记住密码 自动填写密码

禁止浏览器记住密码、自动填写密码，支持明文暗文显示密码

使用方法：父组件中引入handPwd.vue组件

父组件使用：

 
            
              
              
            
       

import handPassword from '@/components/common/handPassword.vue'

components: {
    handPassword
  },

data(){
    return {
        form:{
            password:''
        },
        rules:{
             password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { pattern: /^[^su4e00-u9fa5]+$/, message: '不允许输入空格、中文等特殊符号' }
        ]
        }
    }
},
methods:{
     inputPassword(val) {
      this.form.password = val
      this.$refs.form.validateField('password')
    }
}

handPwd.vue

  

    

      
      
       {}"
        @paste.prevent="() => {}"
        @cut.prevent="() => {}"
        :placeholder="placeholder"
        :maxlength="maxLength"
        class="el-input__inner"
        :style="{ 'padding-right': clearPwd != '' ? '56px' : '30px' }"
      />
      
      
        
          
          
           
    
    

      密码不能为空
    
  


/**
 * 手写密码，不支持右键菜单、复制、黏贴、剪切
 */
export default {
  name: 'handPassword',
  props: {
    // 输入框的id
    inputId: {
      type: String,
      default: 'passwordInput'
    },
    // 后门：用户名称，方便开发使用浏览器记住密码
    account: {
      type: String,
      default: ''
    },
    // 需要使用子组件的校验，一般不使用
    needValidatePwd: {
      type: Boolean,
      default: false
    },
    // 输入框的暗注释
    placeholder: {
      type: String,
      default: '请输入密码'
    },
    // 输入框的最大输入长度
    maxLength: {
      type: Number,
      default: 100
    },
    // 输入框头部图标类名
    prefixIconName: {
      type: String,
      default: ''
    },
    // 初始化密码值，一般用于编辑表单
    originPwd: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      secretPwd: '', //暗文密码
      clearPwd: '', //明文密码
      showPwd: false, //是否显示明文
      errorPwd: false //是否密码错误
    }
  },
  watch: {
    /**
     * 监听初始化密码，将明文和暗文密码分别初始化
     */
    originPwd: {
      handler(val) {
        this.clearPwd = val
        this.secretPwd = '●'.repeat(val.length)
      },
      immediate: true
    }
  },
  created() {
    /**
     * 禁止浏览器右键，因为右键菜单里有撤销、重写、黏贴、复制
     */
    window.oncontextmenu = function(e) {
      e.preventDefault()
    }
  },
  methods: {
    /**
     * 重置方法，一般是给父组件调用
     */
    reset() {
      this.showPwd = false
      this.errorPwd = false
    },
    /**
     * 检查密码
     */
    checkPassword() {
      if (this.needValidatePwd) {
        if (this.clearPwd === '') {
          this.errorPwd = true
        } else {
          this.errorPwd = false
        }
      }
    },
    /**
     * 点击密码框后的小眼睛，切换明文或暗文
     */
    handleShowPwd() {
      if (this.showPwd) {
        this.secretPwd = '●'.repeat(this.secretPwd.length)
      } else {
        this.secretPwd = JSON.parse(JSON.stringify(this.clearPwd))
      }
      this.showPwd = !this.showPwd
    },
    /**
     * 输入密码
     */
    inputPassword(val) {
      const inputVal = val.target.value //原生input需要取target.value

      // 如果明文展示或者只输入了一个字符，比较简单，直接复制
      if (this.showPwd || inputVal.indexOf('●') === -1) {
        if (this.showPwd) {
          this.secretPwd = inputVal
        } else {
          this.secretPwd = '●'.repeat(inputVal.length)
        }
        this.clearPwd = inputVal
      } else {
        const planeTextLen = this.clearPwd.length, //明文长度
          cipherTextLen = inputVal.length, //暗文长度
          selectionEnd = document.getElementById(this.inputId).selectionEnd // 获取光标位置
        const realArr = this.clearPwd.split(''), // 真实密码数组
          coverArr = inputVal.split('') // 文本框显示密码数组
        let index = -1 // 新输入的字符位置
        let lastChar = '' // 新输入的字符
        // 找到新输入的字符及位置
        coverArr.forEach((el, idx) => {
          if (/[^●]/g.test(el)) {
            index = idx
            lastChar += el
          }
        })

        if (planeTextLen < cipherTextLen) {
          // 新增
          realArr.splice(index, 0, lastChar)
        } else if (cipherTextLen  {
          document.getElementById(this.inputId).selectionEnd = selectionEnd
        })
      }
      this.checkPassword()
      // 告知父组件明文密码
      this.$emit('inputPwd', this.clearPwd)
    }
  }
}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 听说你的爬虫被封了？

前言 当我们使用爬虫程序时，有可能会遇到因为大量访问网站而被网站封锁IP的情况。这时，我们可以使用代理IP来解决这个问题。下面将详细介绍如何使用代理IP来避免被封IP的情况，并附上代码实例。 一、为什么会被封IP？ 在访问网站时，网站会记录我们的IP地址，如果…