vue使用@vueuse/core在元素外边点击关闭弹窗的原理实现

1、首先安装@vueuse/core

npm i @vueuse/core

2、在app.vue中使用

<template>
  <div class="box" ref="target">
  div>

template>

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

const target = ref(null)
const visiable = ref(true)
onClickOutside(target, () => {
  console.log("在盒子外边点击了,可以关闭弹窗啦")
  visiable.value = false
  console.log(visiable.value)
})
script>

<style scoped lang="less">
.box{
  margin: 50px auto;
  border: 1px solid black;
  width: 400px;
  height: 400px;
}
style>

3、效果如下：点击盒子外边即可设置自己的内容是否显示