Vue中自定义指令：ClickOutside（点击当前模块外的位置）

应用场景

假设我们有一个下拉框组件，当下拉框展开的时候，点击下拉框之外的元素可以自动关闭下拉框。

ClickOutside代码示例

在vue3中使用ClickOutside

// 导入自定义指令
import { ClickOutside as vClickOutside } from 'element-plus';

// 绑定指令触发对应事件
<div id="d1" v-click-outside="closeOrder">
    暂无数据
</div>

// 写相关逻辑事件
const closeOrder = () => {
    console.log('点击了d1区域之外的位置')
}

vue2中使用ClickOutside

// 导入指令
import { ClickOutside } from 'element-plus';

// 映射该指令
directives:{ ClickOutside }

// 绑定指令触发对应事件
<div id="d1" v-clickOutside="closeOrder">
    暂无数据
</div>

// 写相关逻辑事件
closeOrder(){
    console.log('点击了d1区域之外的位置')
}