Переключить класс по директиве click? - PullRequest
Новая
       43

Переключить класс по директиве click?

0 голосов
/ 24 апреля 2018

Есть ли способ добавить и удалить класс, используя директиву при нажатии на элемент?

Я хочу избежать помещения элемента в шаблон и просто использовать директиву.

Так что-то вроде: 

<div v-toggle-class></div>

Тогда это переключит предопределенный класс, такой как .active

1 Ответ

0 голосов
/ 24 апреля 2018

Вы можете использовать пользовательскую директиву и присоединить ее к событию click (в хуке bind).

РЕДАКТИРОВАТЬ: изменено, чтобы использовать контекст данных элемента для хранения активного флага класса

Просто быстрый пример: 

Vue.directive("toggle-active", {
  bind: function(el, binding, vnode) {
    el.addEventListener(
      "click",
      () => {
        let active = vnode.context.class_active;
        active = !active;
        vnode.context.class_active = active;
        if (!active) {
          el.classList.remove("active");
          el.classList.add("not-active");
        } else {
          el.classList.remove("not-active");
          el.classList.add("active");
        }
      },
      false
    );
  }
});
...