Обработка пользовательских событий размытия и фокусировки с помощью vue - PullRequest
Новая
       4

Обработка пользовательских событий размытия и фокусировки с помощью vue

0 голосов
/ 03 апреля 2020

У меня небольшая проблема с некоторыми пользовательскими режимами размытия и фокусировки с использованием компонента vue -select .

Я пытаюсь переопределить поведение размытия компонент, если пользователь щелкает и указывает на заданную c предопределенную цель - например, если пользователь нажимает #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 -подобный способ решения проблемы, поэтому, если есть лучший способ решить эту проблему, я открыт для предложений.

...