前言
自定义指令的简要介绍，以及图片懒加载的应用。
语法介绍
-
注册全局指令
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">
