vue3 自定义指令-clickOutside

介绍

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。自定义指令可以使用钩子函数。使用场景有 input框自动聚焦，下拉框点击外部能自动隐藏等 下面就是一个按钮点击(下拉框没有放进来)，点击外部能够识别

主要代码

1. 局部自定义指令

局部的只需要在同一个vue文件中完成，首先在 vue setup 中定义一个 vTest,

const vTest = {
  mounted(el, binding) {
    const handler = (e) => {
      if (el.contains(e.target)) {
        // e为鼠标事件，如果点击的是按钮本身就不执行操作
        return false
      }
      if (typeof binding.value === 'function') {
        // 否则执行传过来的方法
        binding.value(e)
      }
      el.__clickoutside__ = handler // 挂在el上方便卸载监听
    }
    window.addEventListener('click', handler) // 全局监听按钮点击事件
  },
  unmounted(el) {
    window.removeEventListener('click', el.__clickoutside__) // 移除并删除该属性
    delete el.__clickoutside__()
  }
}

在template中使用自定义事件

<button 
<!-- 自定义指定，传递方法-->
v-test="onClickOutside"
@click="state.visible = !state.visible"
>
    手动激活
</button>

// 当点击外部，状态置为false
const onClickOutside = (e) => {  
console.log('点击外部了嘛')
state.visible = false  
}

2.全局定义自定义指令

通过 app.directive定义自定义事件，里面的内容与使用方法与局部自定义指令是类似的，可以参考

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('outsides', {
  mounted(el, binding) {
    const handler = (e) => {
      if (el.contains(e.target)) {
        return false
      }
      if (typeof binding.value === 'function') {
        binding.value(e)
      }
      el.__clickoutside__ = handler
    }
    window.addEventListener('click', handler)
  },
  unmounted(el) {
    window.removeEventListener('click', el.__clickoutside__)
    delete el.__clickoutside__()
  }
})

总结

因为遇到了这个问题，正好就记录下来方便自己下次参考，如果代码有问题感谢指出！！