Vue自定义指令详细攻略

Vue提供了许多内置指令用于操作DOM元素，如v-if、v-show、v-bind等。但是，如果我们想要自定义一些不同于Vue提供的指令来操作DOM元素，该怎么做呢？这时候，Vue的自定义指令就派上用场了。

自定义指令的基本使用

Vue允许开发者自定义指令，只需要在Vue实例中的directives选项中注册即可。

自定义指令需要定义一个名为钩子函数的对象，该对象中包含了一些被调用的钩子函数，如bind、inserted、update、componentUpdated、unbind等。

<template>
  <div>
    <p v-highlight>
      这里的文本将会被高亮
    </p>
  </div>
</template>
<script>
export default {
  directives: {
    highlight: {
      bind: function(el, binding) {
        el.style.backgroundColor = binding.value
      }
    }
  }
}
</script>

上述代码定义了一个自定义指令highlight，它会在被绑定的元素上设置一个背景色。

钩子函数详解

bind

当指令在元素上第一次绑定时，bind函数会被调用。该函数只会在指令第一次绑定到元素时被调用一次。

bind钩子函数接收三个参数：

bind: function(el, binding, vnode) { /* ... */ }

el：指令所绑定的元素，可以用来操作DOM。
binding：包含指令传递给它的值的一个对象，可以访问该对象的property来获取这个值。
vnode：Vue编译生成的虚拟节点。

inserted

inserted钩子函数会在元素被插入到父元素中时调用。

inserted: function(el, binding, vnode) { /* ... */ }

update

当绑定值更新时，update钩子函数会被调用，但是它不保证DOM已经完成更新。

update: function(el, binding, vnode, oldVnode) { /* ... */ }

el：指令所绑定的元素，可以用来操作DOM。
binding：包含指令传递给它的值的一个对象，可以访问该对象的property来获取这个值。
vnode：Vue编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子函数中可用。

componentUpdated

当组件和子组件的VNode被更新时，componentUpdated钩子函数会被调用。

componentUpdated: function(el, binding, vnode, oldVnode) { /* ... */ }

el：指令所绑定的元素，可以用来操作DOM。
binding：包含指令传递给它的值的一个对象，可以访问该对象的property来获取这个值。
vnode：Vue编译生成的虚拟节点。
oldVnode：上一个虚拟节点。

unbind

当指令从元素上解绑时，unbind钩子函数会被调用。

unbind: function(el, binding, vnode) { /* ... */ }

自定义指令实例

防抖指令

防抖指令可以将一个事件在某个时间段内被触发多次的情况下，只保留最后一次触发。比如，当需要搜索远程数据的时候，只有在用户停止输入一段时间后才去请求数据，避免请求过于频繁造成浪费。

<template>
  <div>
    <input type="text" v-debounce:300="search" placeholder="请输入需要搜索的内容" />
  </div>
</template>
<script>
export default {
  directives: {
    debounce: {
      inserted: function(el, binding) {
        let timer = null
        el.addEventListener('input', function() {
          if (timer) {
            window.clearTimeout(timer)
            timer = null
          }
          timer = setTimeout(() => {
            binding.value()
          }, binding.arg || 500)
        })
      }
    }
  },
  methods: {
    search() {
      console.log('search')
    }
  }
}
</script>

上述代码定义了一个防抖指令v-debounce，以输入框的input事件作为触发时机，当该事件触发时，先清除之前设置的定时器，然后再设置新的定时器，在指定时间内没有再次触发输入框的input事件时才会调用绑定的方法。

拖拽指令

拖拽指令可以将一个元素实现拖拽效果。

<template>
  <div>
    <div v-draggable>
      拖动我试试
    </div>
  </div>
</template>
<script>
export default {
  directives: {
    draggable: {
      inserted: function(el) {
        let isDown = false
        let x = 0
        let y = 0

        el.style.position = 'fixed'
        el.addEventListener('mousedown', function(e) {
          isDown = true
          x = e.clientX - el.offsetLeft
          y = e.clientY - el.offsetTop
        })
        document.addEventListener('mousemove', function(e) {
          if(!isDown) {
            return
          }

          const left = e.clientX - x
          const top = e.clientY - y

          el.style.left = `${left}px`
          el.style.top = `${top}px`
        })
        el.addEventListener('mouseup', function() {
          isDown = false
        })
      }
    }
  }
}
</script>

上述代码定义了一个拖拽指令v-draggable，以元素的mousedown、mousemove、mouseup事件作为触发时机，当mousedown事件触发时记录鼠标相对于元素左上角的位置，再在mousemove事件中不断计算鼠标的位置，并改变元素的left和top值，最后在mouseup事件中将鼠标的状态改为false，拖拽就结束了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue自定义指令详细 - Python技术站

Vue自定义指令详细