vue自定义指令 v-focus 实现

让页面的输入框自动聚焦，我们可能会怎么做：

<template>
   <input ref="input" />
</template>

<script>
  export default {
    mounted() {
      this.$refs.input.focus();
    }
  }
</script>

上面的代码基本能实现我们需要的功能，但是要是有很多页面都需要这个功能，那我们就只能是复制这段代码过去了，而通过自定义指令我们就能回避这种问题，下面就看看如果使用指令，应该怎么做。

Vue.directive('focus', {
  bind() {},
  inserted(el) {
    el.focus()
  },
  update() {},
  componentUpdated() {},
  unbind() {}
})

我们通过全局的Vue实例注册一个自定义指令，然后通过 v-focus 绑定到需要聚焦的 input 元素上。如果，其他组件或模块也需要聚焦功能，只要简单的绑定此指令即可。

<template>
   <input v-focus />
</template>