ClickOutside的五种解决方案（在vue3和vue2中）

本文介绍了五种ClickOutside（点击自身以外的位置）的解决方案，以供大家使用。笔者都是使用方案一居多

效果图

Vue3中

方案一 使用vueuse提供的onClickOutside函数

如下代码：

<template>
  <div>
    <button ref="target" style="zoom: 3;">你好啊</button>
  </div>
</template>

<script setup>
import { onClickOutside } from '@vueuse/core'
import { ref } from "vue";

const target = ref(null)

onClickOutside(target, (event) => {
  console.log('点击外部区域', event)
})
</script>

官方文档地址：https://vueuse.org/core/onClickOutside/

方案二 使用element-plus提供的ClickOutside自定义指令

如下代码：

<template>
  <div>
    <button v-c="fn" style="zoom: 3;">你好啊</button>
  </div>
</template>

<script setup>
import { ClickOutside as vC } from 'element-plus'

const fn = () => {
  console.log('点击外部区域')
}
</script>

可在node_modules文件夹中的对应的element-plus包中找到

Vue2中

方案三 使用element-ui提供的Clickoutside自定义指令

如下代码：

<template>
  <div>
    <button v-clickoutside="fn" style="zoom: 3;">你好啊</button>
  </div>
</template>

<script>
import Clickoutside from 'element-ui/src/utils/clickoutside'
export default {
  directives: {
    Clickoutside
  },
  methods: {
    fn() {
      console.log('点击了外部元素')
    }
  }
}
</script>

可在node_modules文件夹中的对应的element-ui包中找到

方案四 使用npm包v-click-outside

如下代码：

安装

npm install --save v-click-outside

使用

<template>
  <div v-click-outside="fn"></div>
</template>

<script>
import vClickOutside from 'v-click-outside'
export default {
  directives: {
    clickOutside: vClickOutside.directive
  },
  methods: {
    fn(event) {
      console.log('Clicked outside. Event: ', event)
    }
  }
};
</script>

详情见社区：https://www.npmjs.com/package/v-click-outside

方案五 阻止内部的div的冒泡事件 @click.stop

这是一种思路，可以参见笔者的这篇文章：https://segmentfault.com/a/1190000039087629