vue自定义指令初用

最近leader总念叨着自定义指令。看了下文档，嗯，真香。项目里2个地方马上就用到了。

一、铺垫

先贴上文档地址 vue自定义指令

其中比较重要的就是五个钩子函数：

1、bind

只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

2、inserted

被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

3、update

所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

4、componentUpdated

指令所在组件的 VNode 及其子 VNode 全部更新后调用。

5、unbind

只调用一次，指令与元素解绑时调用。

二、项目中用到的地方：

1、添加点击事件埋点统计时

埋点的地方比较多，一个一个点击事件加起来麻烦。封装了个自定义指令。

Vue.directive('clickReport', {
  inserted: function (el, binding) {
    el.addEventListener('click', () => {
      if(binding.value) {
        let {track_id, user_id, user_number} = getInfo()
        click({event_id: binding.value, track_id: track_id, user_id: user_id, user_number: user_number})
      }
    })
  }
})

2、监听滚动事件加载动画

因为页面要添加动画的元素比较多，查到了自定义滚动指令，模仿官网copy了一分，加了个节流（debounce）。

// vScroll.js

import Vue from 'vue'

function debounce(fn, delay) {
  // 定时器，用来 setTimeout
  var timer
      // 返回一个函数，这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数
  return function() {
      // 保存函数调用时的上下文和参数，传递给 fn
      var context = this
      var args = arguments
          // 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn
      clearTimeout(timer)
          // 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），
          // 再过 delay 毫秒就执行 fn
      timer = setTimeout(function() {
          fn.apply(context, args)
      }, delay)
  }
}

Vue.directive('scroll', {
  inserted: function (el, binding) {
    let f = function (evt) {
      var hasRun = false
      if (!hasRun && window.scrollY > binding.value.start) {
        hasRun = true
        if(el.className.indexOf(binding.value.className)>-1) return
        el.className +=  ' ' + binding.value.className ; 
      }
      if (window.scrollY > binding.value.end) {
        window.removeEventListener('scroll', f)
      }
    }
    window.addEventListener('scroll', debounce(f), 250)
  }
})

页面引用的时候只需要在html上绑定一下动画开始的window.scrollY（即下面的start），及移除监听滚动事件时候的window.scrollY（即下面的end）。
栗子如下：

<div v-scroll="{start:2034 ,end:3400 ,className:'leftToRight'}"></div>
.leftToRight {
   animation: lTR .4s;
   opacity: 1;
}

@keyframes lTR
{
    0%   {opacity: 0; margin-left: -10px;}
    25%  {opacity: 0.25; margin-left: -7px;}
    50%  {opacity: 0.5; margin-left: -4px;}
    100% {opacity: 1; margin-left: 0;}
}

这样就能愉快的加上动画了，做个全是动效的静态页还挺快的。就是UI验收的时候比较麻烦，得调参。

三、总结

自定义指令，个人感觉是可以在普通 DOM 元素进行底层操作时能用到，还能传一些自定义的数据，比较灵活方便。

最后编辑于：2019.01.30 20:29:46