Javascript

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 实现的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!