Vue listens to an area outside an element being clicked

 clickoutside is a custom instruction implemented by Element-ui to handle click events outside the target node

<template>
  <div class="">
    <div v-clickoutside="handler">text</div>
  </div>
</template>

<script>
import clickoutside from "element-ui/src/utils/clickoutside";
export default {
  directives: { clickoutside },
  data() {
    return {};
  },
  created() {},
  methods: {
    handler() {
      console.log("text以外被点击了");
    },
  },
};
</script>