0

我在使用vue-select组件时遇到了一些自定义模糊和焦点行为的小问题。

我试图覆盖组件的模糊行为，如果用户点击离开并点击特定的预定义目标 - 例如，如果用户在#special-place选择打开时点击，则选择应该保持打开状态，直到任何其他元素收到重点。

下面的代码让我了解了大部分情况，但有一个小错误：如果打开了一个下拉菜单并单击了另一个选择组件，则第二个组件保持打开状态，无论后续单击如何。这是一个沙盒，有一个活生生的例子。

模板如下：

<template>
  <v-select
    @search:blur="customBlurHandler"
    :options="options"
    :filterable="false"
    :ref="reference"
    :placeholder="placeholder"
    label="name"
  >
    <!-- Remove caret icon -->
    <div slot="open-indicator"></div>
  </v-select>
</template>

相关方法如下（不是最好的命名，我知道）：

export default {
  data() {
    return {
      options: ["one", "two", "three"],
      isBlurHandlerActive: false,
      reference: `${this.locationType}Select`
    };
  },
  props: ["locationType", "placeholder"],
  name: "CustomSelector",
  components: { vSelect },

  methods: {
    clickHandler(event) {
      const specialClicked = event.target.closest("#special-place") !== null;
      if (specialClicked) return;
      else {
        this.isBlurHandlerActive = true;
        document.removeEventListener("click", this.clickHandler);
        this.forceOptionsClosed();
      }
    },

    customBlurHandler() {
      if (this.isBlurHandlerActive) {
        this.isBlurHandlerActive = false;
        return;
      } else {
        this.forceOptionsOpen();
        document.addEventListener("click", this.clickHandler);
      }
    },

    forceOptionsClosed() {
      this.$refs[this.reference].open = false;
      this.$refs[this.reference].searchEl.blur();
    },

    forceOptionsOpen() {
      this.$refs[this.reference].open = true;
      this.$refs[this.reference].searchEl.focus();
    }
  }
};

我也知道这可能不是解决问题的最类似于 vue 的方法，所以如果有更好的方法来解决这个问题，我愿意接受建议。

4

0 回答 0