likes
comments
collection
share

Vue自定义指令——v-focus

作者站长头像
站长
· 阅读数 56

“我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第2篇文章,点击查看活动详情

前言

本文直接参考vue2.0官方文档, 并演示博主项目中的使用

自定义指令 directive

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个聚焦输入框的例子:

当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作)。事实上,只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能:

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
        // 聚焦元素
        el.focus()
    }
})

然后你可以在模板中任何元素上使用新的 v-focus property,如下:

<input v-focus>

项目实际使用

技术背景

  • vue2.0
  • nuxt.js
  • ElementUI

实际操作

首先不同于vue-cli脚手架在入口main.js里面定义自定义指令,在nuxt.js中,nuxt.config.js作为项目的入口文件和配置文件,定义自定义指令也是在这里定义

我们直接跳到nuxt.config.jsplugins配置项

plugins:该配置项用于配置那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。

拿博主项目例子来看,在plugins文件夹下新建directive.js文件,引入Vue,定义自定义指令 Vue自定义指令——v-focus

组件中使用,直接在想要默认焦点的地方写入v-focus即可,如下图: Vue自定义指令——v-focus

优势

一个字:简单 O(∩_∩)O哈哈~

和传统方式比较:

传统方法使用ElementUI input提供的focus()来手动触发,通过$refs[ref].focus()来使 input 获取焦点

然而我们在使用的时候,尤其是将其放在mounted或者created或watch()的immediate: true初始化时,经常会失效,原因就是,组件渲染需要时间,如果JS处理比渲染的快,就会造成失效问题,如何解决呢?那就是延后处理,常用的主要有两种方法:

setTimeout(fn, 0) 永远的神

这里涉及到JavaScript的EventLoop,简单来讲,setTimeout的回调是异步的,js会将异步的任务放在同步任务后处理。

指定某个任务在主线程最早可得的空闲时间执行,也就是说,尽可能早得执行。它在"任务队列"的尾部添加一个事件,因此要等到同步任务和"任务队列"现有的事件都处理完,才会得到执行。

所以我们可以将focus()放在settimeout回调中:

setTimeout(function () {
       this.$refs['ref名'].focus()
}, 0)
$nextTick(callback)

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

目的也是等待组件渲染结束后执行,用法:

this.$nextTick(function () {
      this.$refs['ref名'].focus()
})

小结

综上所述,自定义指令v-focus的好处就显而易见了

  1. 不必在控件上定义ref
  2. 不用通过settimeout和nextTick的方式延迟执行

后续博主会根据实际项目继续更新其它好用的自定义指令,关注我,持续更新,一定有你想要看到的技术干货哦~

~( ̄︶ ̄)↗点赞

转载自:https://juejin.cn/post/7143553311155683336
评论
请登录