element-plus中的自定义指令 ClickOutside点击当前区域之外的位置

812 阅读1分钟

vue3.0中使用ClickOutside

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

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

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

vue2.0中使用ClickOutside

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

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

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

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