在不同的组件上同时使用focusout和onclick

Question

我正在尝试在Vue中实现从头开始的自动完成，但是我有问题在下拉菜单中选择选项。我正在启用（shownig）这个下拉列表，在点击输入或用户输入时。然后，在输入之外的焦点上，我想摆脱下拉列表。但是，这意味着当我选择dropdown中的内容时，我将关闭dropdown，而不是触发selectoption。如何同时保持V-ON:focusout对input和@click=“selectoption（option）”对下拉选项？到目前为止，使selectoption起作用的唯一方法是删除focusout，这不是我想要的...

<template>
  <div>
    <input
      type="text"
      v-on:input="enableDropdown"
      v-on:click="enableDropdown"
      v-on:focusout="disableDropdown"
    />
    <div class="options-dropdown" v-if="showDropdown">
      <div
        class="option"
        v-for="option in options"
        :key="option"
        @click="selectOption(option)"
      >
        {{ option }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [
        "java",
        "c#",
        "c++++"
      ],
      showDropdown: false,
    };
  },
  methods: {
    enableDropdown() {
      this.showDropdown = true;
    },
    disableDropdown() {
      this.showDropdown = false;
    },
    selectOption($event) {
      console.log($event);
    },
  },
};
</script>

Answer 1

如果当前的焦点在选项-Dropdown中，则应签入DisableDropdown事件。

类似这样的东西

disableDropdown() {    
  this.showDropdown = this.$refs.optionsDropdown === document.activeElement;
}

这样，如果options-dropdown处于焦点状态，它将返回true（您还需要向其添加ref标记）。