单击任意位置时如何关闭下拉列表

Question

如何关闭单击任意位置时打开的下拉菜单？

这段代码：

<tr class="inputs-table">
  <td>Type object: </td>
  <td>
    <div class="select">
      <div class="select-header form-control" v-on:click="AddForm(1)">
        <span class="select__current">Please select one option</span>
      </div>
      <addForm v-if="addedForm === 1" />
    </div>
  </td>
</tr>
<tr class="inputs-table">
  <td>Type business-model: </td>
  <td>
    <div class="select">
      <div class="select-header form-control" v-on:click="AddForm(2)">
        <span class="select__current">Please select one option</span>
      </div>
      <addForm v-if="addedForm === 2" />
    </div>
  </td>
</tr>

export default {
  name: 'Index',
  data() {
    return {
      addedForm: 0,
    }
  },
  methods: {
    AddForm(number) {
      this.addedForm = number;
    },
    closeForm() {
      this.addedForm = false;
    }
  },
  components: {
    addForm,
  }
}

下拉列表：

接下来我可以尝试什么？

Answer 1

您可以使用 if window.onClick 并查看它是否与您的元素匹配。如果没有，则关闭它；调用检查mounted和beforeDestroy或breforeRouteLeave点击的函数。

例如：

mounted(){
    this.hideNav()
},
methods: {
    hideNav() {
        window.onclick = function(event) {
        if (!event.target.matches('.select__body')) {
            this.closeForm()
        }
     }
   }
},
beforeRouteLeave() {
    this.hideNav()
}

Answer 2

<template>
  <div
    @click="dropdownIsActive = !dropdownIsActive"
    ref="dropdown"
  >
  </div>
</template>

<script>
  export default {
    data: () => ({
      dropdownIsActive: false
    }),
    created () {
      window.addEventListener('click', this.closeDropdown)
    },
    methods: {
      closeDropdown (e) {
        if (!this.$refs.dropdown.contains(e.target)) {
          this.dropdownIsActive = false
        }
      }
    },
    beforeDestroy () {
      window.removeEventListener('click', this.closeDropdown)
    }
  }
</script>