lixin-web/webapp/js/util/Pw2Text.js

vue and bootstrap

import {camelCase} from 'lodash'
import {isIE,isEdge} from './UA'
import {error} from '../plugins/sweetalert2'
export const _getPw = ($vm,refPw = '$pw',keyPw = 'password',elInput = null) => {
  const target = $vm[refPw]
  const value = target.value
  let hiddenValue
  if ($vm.isIE || $vm.isEdge) {
    return $vm.req[keyPw] = value
  }
  if ($vm.composition) {
    $vm.req[keyPw] = ''
    return
  }
  $vm.composition = false
  const pw = $vm.req[keyPw]
  const sub = pw.length - value.length
  const {
    selectionStart,
    selectionEnd
  } = target

  let endSlice = 0
  let startSlice = -1
  if (sub > 0) {
    endSlice = sub
  } else if (sub < 0) {
    endSlice = -1
  }
  //              console.warn(pw,value,sub,selectionStart,selectionEnd)
  //              if(sub == 0) {
  //                console.error('select 1 and keyup')
  //                $vm.req.password = pw.slice(0,selectionStart - 1) + value.slice(selectionStart - 1,selectionStart) + pw.slice(selectionStart)
  //              }
  //              else if(sub > 0) {
  //                console.error('del str')
  //                if(selectionStart == sub) {
  //                  console.error('selectionStart == sub')
  //                  $vm.req.password = pw.slice(0,selectionStart - 1) + value.slice(selectionStart - 1,selectionStart) + pw.slice(selectionStart + sub)
  //
  //                }
  //                else if(value.length == 1){
  //                  //select all and keyup
  //                  $vm.req.password = value
  //                }
  //                else{
  //                  $vm.req.password = pw.slice(0,selectionStart) + pw.slice(selectionStart + sub)
  //                }
  //              }
  //              else{
  //                console.error('keyup add string')
  //                $vm.req.password = pw.slice(0,selectionStart - 1) + value.slice(selectionStart - 1,selectionStart) + pw.slice(selectionStart - 1)
  //              }
  if (sub > 0 && value.length == 1) {
    $vm.req[keyPw] = value
  } else {
    if (sub > 0 && selectionStart !== sub) {
      startSlice = 0
    }
    $vm.req[keyPw] = pw.slice(0, selectionStart + startSlice) + (sub <= 0 || sub > 0 && selectionStart === sub ? value.slice(selectionStart - 1, selectionStart) : '') + pw.slice(selectionStart + endSlice)
  }
  hiddenValue = '●'.repeat(value.length)
  if(elInput){
    elInput.setCurrentValue(hiddenValue)
    elInput.$nextTick(() => target.setSelectionRange(selectionEnd, selectionEnd))
  }else{
    target.value = hiddenValue
    target.setSelectionRange(selectionEnd, selectionEnd)
  }
}

export const compositionPw = ($vm,refPw = '$pw',keyPw = 'password',elInput = null) => {
  //first do this.$pw = this.$refs.pw
  $vm[refPw].addEventListener('compositionstart',e => {
    $vm.composition = true
    error('输入密码时请切换到英文输入法!',false)
  });
  $vm[refPw].addEventListener('compositionend',e => {
    $vm.composition = false
    $vm[refPw].value = $vm.req[keyPw] = ''
    isNaN(e.data) ? $vm.$swalProto.close() : elInput && elInput.setCurrentValue('')
  })
}

export const elementPwtoText = ($vm,length) => {
  Object.keys($vm.req)
    .slice(0,length || $vm.req.length)
    .forEach(i => {
      const attr = `$${i}`
      const method = camelCase('get ' + i)

      $vm[method] = () => _getPw($vm,attr,i,$vm.$refs[i])

      $vm[attr] = $vm.$refs[i].$refs.input
      $vm[attr].addEventListener('input',$vm[method])
      if(!(isIE || isEdge)) {
        compositionPw($vm,attr,i,$vm.$refs[i])
      }
    })

}