自定义指令： 点击其他区域

点击其他 dom 时触发

基础用法

在需要的 dom 上，使用 v-clickoutside 自定义指令

提示

该指令会包含子节点

点击此处之外的区域

内部区域

<template>
  <div style="width: 200px; height: 200px; border: 1px solid red" v-clickoutside="outside">
    点击此处之外的区域
    <div style="width: 100px; height: 100px; border: 1px solid green"> 内部区域 </div>
  </div>
</template>

<script setup>
  import { getCurrentInstance } from 'vue';

  const { proxy } = getCurrentInstance();

  const outside = () => {
    proxy.$Message.info('点击其他区域');
  };
</script>

隐藏源代码