vue自定义指令 v-focus 实现

本文主要是介绍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>

这篇关于vue自定义指令 v-focus 实现的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！