I use vue to bind a click event to a div to trigger the class style, how can I capture the user clicking on an event other than this div, and then reset the style of the div

clipboard.png
I clicked on the gear to trigger the 2 mini menu. If the user clicks somewhere else, the mini menu should disappear. How can I catch the event that the user clicked other than this div?

Mar.07,2022

add a custom instruction to vue

Vue.directive('clickoutside', {
  bind(el, binding, vnode) {
    function documentHandler(e) {
      if (el.contains(e.target)) {
        return false;
      }
      if (binding.expression) {
        binding.value(e);
      }
    }

    el.__vueClickOutside__ = documentHandler;
    document.addEventListener('click', documentHandler);
  },
  unbind(el, binding) {
    document.removeEventListener('click', el.__vueClickOutside__);
    delete el.__vueClickOutside__;
  },
});

so that you can pass v-clickoutside

<div v-clickoutside="outside">
  ...
</div>

overhear events that have been clicked elsewhere

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e4bc83-43411.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e4bc83-43411.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?