Условно свяжите пользовательские директивы в vue js для «щелчка вне события элемента»

Почему бы вам просто не сделать выбранную проверку внутри внешнего обработчика кликов? Вам также понадобится способ передачи щелкнутого элемента в обработчик.

<div id="list-item" v-on-click-outside="outSideClickHandler(item)"></div>

outSideClickHandler(item) {
  return event => {
    if (item.selected) {
      // Handle the click outside
    }
  };
}

Вызовите обработчик в директиве следующим образом:

binding.value(event);

Вы не получаете автоматическую привязку "выражение/утверждение" для настраиваемых директив, например, с помощью v-on поэтому вам нужно заархивировать функцию обработчика, когда вы хотите передать ему дополнительные аргументы.

Под этим я подразумеваю, что аргумент, переданный в v-on может быть выражением или выражением, например:

@click="handler"        - handler is an expression (the function itself)
@click="handler(item)"  - handler(item) is a statement

Но с настраиваемыми директивами вы можете передавать только выражения; вторая строка выше не возможна, если handler() возвращает другую функцию.

---

Я думаю, что есть некоторая путаница, потому что кажется, что вы хотите, чтобы иметь настраиваемую директиву, которая используется только в этой конкретной ситуации с вашими элементами списка, но мое решение выше - это больше о том, чтобы написать общую директиву "клик снаружи", которую вы можете использовать в любой ситуации.

Также я думаю, что вы не хотите, чтобы директива регистрировала прослушиватели событий, если элемент списка не выбран (по соображениям производительности?). В этом случае вы можете использовать делегирование делегирования.

Невозможно условно включить/отключить директиву, вам нужно будет сделать что-то наподобие ответа Морти, оба из которых беспорядочны.

Это кажется работоспособным, но весь смысл использования пользовательских директив заключается в написании кода манипуляции с многократным использованием

Вы против написания кода манипуляции DOM вне директив? Угловая 1 имела эту философию. Если вы не хотите повторно использовать директиву в разных ситуациях, то может быть излишним написать директиву для этой ситуации, чтобы "код манипуляции DOM не загрязнял мой компонент". Если я собираюсь написать директиву, я бы хотел, чтобы она была как можно более общей, чтобы я мог использовать ее во многих разных ситуациях.

Мне даже не нужно передавать этот предмет в этом случае. Причина У меня есть компонент внутри v-for, а не div, и я связываю настраиваемую директиву с компонентом, обработчиком которого является метод

Тогда я не уверен, почему вы хотите реализовать это как директиву, которая редко нужна в любом случае. Вы можете просто зарегистрировать событие щелчка тела в mounted крюке и удалить его в destroyed крюке. Вся логика "внешний вид клика" может содержаться внутри самого компонента.

---

Если ваша основная проблема заключается в том, что вам не нужно регистрировать прослушиватель событий нажатия кнопки тела для каждого элемента списка, вы можете сделать что-то вроде этого:

const handlers = new Map();

document.addEventListener('click', e => {
    for (const handler of handlers.values()) {
        handler(e);
    }
});

Vue.directive('click-outside', {
    bind(el, binding) {
        const handler = e => {
            if (el !== e.target && !el.contains(e.target)) {
                binding.value(e);
            }
        };

        handlers.set(el, handler);
    },

    unbind(el) {
        handlers.delete(el);
    },
});

Вы можете сделать еще один шаг и автоматически добавить слушателя handlers щелчка тела, когда handlers непусты и удалить слушателя, когда handlers пусты. Это вам.