vue 自定义指令 focus input框自动对焦

目的： 除非一些特定操作，否则始终聚焦指定的input框
组件：clickoutside.js

const clickoutsideContext = '@@clickoutsideContext'
export default {
  bind(el, binding, vnode) {
    const documentHandler = (e) => {
      if (vnode.context && !el.contains(e.target)) {
        vnode.context[el[clickoutsideContext].methodName]()
      }
    }
    el[clickoutsideContext] = {
      documentHandler,
      methodName: binding.expression,
      arg: binding.arg || 'click'
    }
    document.addEventListener(el[clickoutsideContext].arg, documentHandler)
  },

  update(el, binding) {
    el[clickoutsideContext].methodName = binding.expression
  },

  unbind(el) {
    document.removeEventListener(
      el[clickoutsideContext].arg,
      el[clickoutsideContext].documentHandler)
  },

  install(Vue) {
    Vue.directive('clickoutside', {
      bind: this.bind,
      unbind: this.unbind
    })
  }
}

页面引入：

import clickoutside from '../../utils/clickoutside.js'

注册：跟data并列

directives: {
    clickoutside
  }

html:

<el-input
ref="inputFocus"
style="position:absolute;left:-99999px;"
:autofocus="true"
v-model.lazy="QRCodeNumber"
type="text"
@change="preparePay" 
v-clickoutside='hiddenSomething' />

方法：

hiddenSomething () {
  // 点击这个元素之外的元素之执行此方法
  // eg: 假如需要弹出框进行另外的input输入事件，则在需要满足条件失焦时执行blur事件(如下)，但是在执行完毕失焦后，需要手动开启自动对焦（关闭弹框后执行this.$refs.inputFocus.focus()，如下面方法videoPlayBackShow()）
  // if (this.humanSettlementVisible.show) {
  //      this.$refs.inputFocus.blur()
  //    } else {
  //		this.$refs.inputFocus.focus()
  // }
}

// 关闭视频回放弹框
//    videoPlayBackShow () {
//      this.$refs.inputFocus.focus()
//    }