分享一个Element-ui/plus中的好用的隐藏指令

377 阅读1分钟

起源于要实现一个全局的监听元素之外被点击的需求,抖音寻找灵感偶然刷到关注很久的博主小山,于是...

指令效果

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)
// 使用一样的我就不写了

友链

Element-plus-ClickOutside源码

程序员小山与Bug