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?

Javascript
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

Previous: Vue theme dynamic skin change, dynamic skin change can be realized by setting a good color to the color variable of scss.

Next: [asking for help] several problems encountered in the submission of the form on the travel itinerary page

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu