1. The first way

The home page will have a name inside the outer container called main (ref=”main”). When bankSwitch is true, the popover will appear

<div class="selectedBorder" ref="main">
	<div class="bankItem" v-if="bankSwitch == true">Hi, I'm the content section of the popover</div>
</div>
Copy the code

The following events are triggered:

On the home page, create a global click event :bodyCloseMenus

When the main container is clicked (this).refs.main && ! this.Refs.main. contains(e.target)), and when the popover appears (self.bankSwitch == true), click on the blank area to close the popover (self.bankSwitch = false).

Finally, the click event is removed before the page is logged out

 mounted() {
    document.addEventListener("click".this.bodyCloseMenus);
  },
  methods: {bodyCloseMenus(e) {
      let self = this;
      if (this.$refs.main && !this.$refs.main.contains(e.target)) {
        if (self.bankSwitch == true){
          self.bankSwitch = false; }}},beforeDestroy() {
    document.removeEventListener("click".this.bodyCloseMenus);
  },
Copy the code

2. The second way

The home page defines a bubbling prevention event in the outer container, @click.stop, that pops up when bankSwitch is true

<div class="selectedBorder" @click.stop>
	<div class="bankItem" v-if="bankSwitch == true">Hi, I'm the content section of the popover</div>
</div>
Copy the code

The following events are triggered:

On the home page, create a global click event :bodyCloseMenus

When the popover appears (self.bankSwitch == true), click the blank area to close the popover (self.bankSwitch = false).

Finally, the click event is removed before the page is logged out

 mounted() {
    document.addEventListener("click".this.bodyCloseMenus);
  },
  methods: {bodyCloseMenus(e) {
      let self = this;
        if (self.bankSwitch == true){
          self.bankSwitch = false; }},beforeDestroy() {
    document.removeEventListener("click".this.bodyCloseMenus);
  },
Copy the code