实现自定义clickoutside指令

最新推荐文章于 2025-02-18 09:54:44 发布

原创最新推荐文章于 2025-02-18 09:54:44 发布 · 359 阅读

CC 4.0 BY-SA版权

本文介绍了如何在Vue中创建一个自定义指令`v-clickoutside`，用于监听点击元素外部的事件，当点击下拉框外部时自动关闭下拉框。通过在`directives`对象中定义该指令，并在`bind`、`update`和`unbind`方法中处理事件监听和移除，结合DOM元素和事件处理函数，实现了这一功能。同时展示了在模板中如何使用该指令，并给出了相应的关闭下拉框的`handleClose`函数示例。

在vue中实现一个自定义指令，应用场景：一个下拉框点击框内每条数据的时候正常走逻辑，点击框外的部分，把下拉框合起

	// 和methods,mounted,computed,watch等平级写一个
	directives：{
		clickoutside
	},
	// 在script标签里面定义一个全局的常量
	  const clickoutside = {
	  bind(el, binding, vnode) {
	    function documentHandler(e) {
	      if (el.contains(e.target)) {
	        return false
	      }
	      if (binding.expression) {
	        binding.value(e)
	      }
	    }
	    el.__vueClickOutside__ = documentHandler
	    document.addEventListener('click', documentHandler)
	  },
	  update() {},
	  unbind(el, binding) {
	    // 解除事件监听
	    document.removeEventListener('click', el.__vueClickOutside__)
	    delete el.__vueClickOutside__
	  },
}
	// 在dom中应用的时候,直接使用自定义的指令，绑定个函数控制下拉框的关闭
	<div v-clickoutside="handleClose"></div>
	// handleClose函数
	handleClose(){
		this.modal = false
	}