起源于要实现一个全局的监听元素之外被点击的需求,抖音寻找灵感偶然刷到关注很久的博主小山,于是...
指令效果
Clickoutside顾名思义就是能够监测到当前绑定元素之外的地方被点击(整个屏幕),触发你传入的函数
Element-ui -- v2
<script>
// 直接引入
import Clickoutside from 'element-ui/src/utils/clickoutside'
// 注册指令,也可以注册为全局的哈
export default {
directives: { Clickoutside },
methods: {
drop() {
alert('老大,场子被点了')
}
}
}
</script>
<template>
<div>
<!--直接在需要监听的元素上使用即可,传入要执行的方法哈-->
<span v-clickoutside="drop">内容</span>
</div>
</template>
Element-plus -- v3
// 老规矩,引入注册 plus直接解构语法即可(我在main.js里注册的)
import { ClickOutside } from 'element-plus'
app.directive('clickOutside', ClickOutside)
// 使用一样的我就不写了