В Vue.js обработка кликов за пределами определенных элементов может быть распространенным требованием при создании удобных интерфейсов. К счастью, Vue предоставляет удобный способ добиться этого с помощью директив. В этой статье мы рассмотрим различные методы реализации директивы Vue external click и предоставим примеры кода для иллюстрации каждого метода.

Метод 1: использование пользовательской директивы
Один из подходов к реализации директивы внешнего клика Vue — создание пользовательской директивы. Это позволяет нам инкапсулировать логику и повторно использовать ее в нескольких компонентах. Вот пример того, как можно определить и использовать пользовательскую директиву:

// Define the directive
Vue.directive('outside-click', {
  bind(el, binding, vnode) {
    const onClick = (event) => {
      if (!(el === event.target || el.contains(event.target))) {
        vnode.context[binding.expression](event);
      }
    };
    document.addEventListener('click', onClick);
    el._clickOutside = onClick;
  },
  unbind(el) {
    document.removeEventListener('click', el._clickOutside);
    delete el._clickOutside;
  }
});
// Use the directive in a component
<template>
  <div v-outside-click="handleOutsideClick">
    <!-- Your component's content here -->
  </div>
</template>

Метод 2: использование встроенных прослушивателей событий
Если вам нужна только функция внешнего щелчка в определенном компоненте и вы не планируете использовать ее повторно, вы можете использовать встроенные прослушиватели событий. Вот пример:

<template>
  <div @click="insideClick">
    <div @click.stop="insideClick">
      <div @click.stop="insideClick">
        <div @click.stop="insideClick">
          <div @click.stop="insideClick">
            <div @click.stop="insideClick">
              <div @click.stop="insideClick">
                <div @click.stop="insideClick">
                  <div @click="outsideClick">
                    <!-- Your component's content here -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    insideClick(event) {
      event.stopPropagation();
    },
    outsideClick() {
      // Handle outside click logic here
    }
  }
};
</script>

Метод 3: использование примеси
Другой способ реализации директивы внешнего клика — использование примеси. Миксины позволяют добавлять функциональность в несколько компонентов. Вот пример:

// Define the mixin
const outsideClickMixin = {
  mounted() {
    document.addEventListener('click', this.checkOutsideClick);
  },
  destroyed() {
    document.removeEventListener('click', this.checkOutsideClick);
  },
  methods: {
    checkOutsideClick(event) {
      if (!this.$el.contains(event.target)) {
        this.handleOutsideClick(event);
      }
    }
  }
};
// Use the mixin in a component
<template>
  <div>
    <!-- Your component's content here -->
  </div>
</template>
<script>
import outsideClickMixin from './outsideClickMixin';
export default {
  mixins: [outsideClickMixin],
  methods: {
    handleOutsideClick() {
      // Handle outside click logic here
    }
  }
};
</script>

В этой статье мы рассмотрели различные методы реализации директивы Vue external click. Мы рассмотрели создание пользовательской директивы, использование встроенных прослушивателей событий и использование примеси. В зависимости от вашего конкретного случая использования вы можете выбрать метод, который лучше всего соответствует вашим потребностям. Надеемся, эти примеры помогут вам упростить взаимодействие с пользователем в ваших проектах Vue.js.