Question

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

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

下面的代码为我提供了大部分帮助，但是有一个小错误：如果打开了一个下拉列表，并且单击了另一个选择组件，则第二个组件将保持打开状态，而不管随后的情况如何点击。 Here’s a sandbox，并附有实际示例。

模板如下：

<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的方式，因此，如果有更好的解决方法，我愿意提出建议。

使用Vue-Select处理自定义模糊和焦点事件

0 个答案: