vue 2.0 自定义指令

前言

自定义指令的简要介绍，以及图片懒加载的应用。

语法介绍

• 注册全局指令

  Vue.directive('lazy', {
    // 钩子函数
    inserted: function (el, binding) {
      // 具体逻辑
    }
  })
  

• 注册局部指令

  directives: {
    lazy: {
      // 钩子函数
      inserted: function (el, binding) {
      // 具体逻辑
      }
    }
  }
  

• 钩子函数及参数

  请查阅官方文档

图片懒加载

imgSrc: 'https://i.imgur.com/avEUftE.png'

• 方法一

tag.png

PS: 上图中的代码，在简书中解析不正常，只好发图片了

• 方法二

自定义v-lazy指令

Vue.directive('lazy', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el, binding) {
    const color = 'pink'
    el.style.backgroundColor = color

    let img = new Image()
    img.src = binding.value || ''
    img.onload = function () {
      el.style.backgroundImage = `url(${binding.value})`
    }
  }
})

应用

<img v-lazy="imgSrc" alt="avator">

参考

Vue.js 自定义指令的用法与实例