vue3自定义指令

在Vue 3中，自定义指令不再直接绑定事件，而是用于处理DOM元素上的自定义行为

export default {
  bind: function (el, binding, vnode) {
    el.clickAnimationEvent = _.throttle(function (event) {
      // here I check that click was outside the el and his childrens
      if (el == event.target || el.contains(event.target)) {
        // and if it did, call method provided in attribute value
        animation(event)
        vnode.context[binding.expression](binding.arg ?? event)
      }
    }, 400)
    el.addEventListener('click', el.clickAnimationEvent)
  },
  unbind: function (el) {
    el.removeEventListener('click', el.clickAnimationEvent)
  }
}

export default {
  mounted(el, binding) {
    el.clickAnimationEvent = _.throttle(function (event) {
      // here I check that click was outside the el and his childrens
      if (el == event.target || el.contains(event.target)) {
        // and if it did, call method provided in attribute value
        animation(event)
        binding.value(binding.arg ?? event)
      }
    }, 400)

    el.addEventListener('click', el.clickAnimationEvent)
  },
}