Vue - Создание экземпляра компонента в пользовательской директиве - PullRequest
Новая
       19

Vue - Создание экземпляра компонента в пользовательской директиве

0 голосов
/ 10 февраля 2020

Я хочу защитить некоторые действия, которые требуют аутентификации, показывая всплывающее окно для входа / регистрации для неаутентифицированных пользователей.

Я хотел бы иметь что-то вроде этого: 

<button require-auth>Like</button>

Когда вы щелкните по нему без проверки подлинности, появится всплывающее окно (я использую всплывающее окно Bootstrap Vue), которое говорит вам, чтобы войти, чтобы продолжить.

Для этого я создал пользовательскую директиву, которая прослушивает на событие клика и проверьте статус аутентификации пользователя. Проблема в том, что я не знаю, как создать оттуда компонент popover и отобразить его.

На самом деле вот что я пытался без успеха: 

export const Authenticated: DirectiveOptions = {
  bind (el, binding, vnode) {
    el.addEventListener('click', (event) => {
      if (store.getters['users/authenticated']) {
        return;
      }

      event.preventDefault();

      const node = document.createElement('div');

      const placement = get(binding, 'value', 'auto');
      const template = `
        <p>Vous devez être connecté pour effectuer cette action</p>
        <div>
          <b-button block :to="{ name: 'login' }">Se connecter</b-button>
          <b-button block :to="{ name: 'register' }">S'inscrire</b-button>
        </div>`;

      const popover = new BPopover({
        propsData: { target: el, placement },
      });

      popover.$slots.default = [template as any];
      popover.$slots.title = ['Connexion requise' as any];

      popover.$mount(node);
      popover.$emit('open');

      console.log(popover.$el) // which log : <---->
    })
  },
};

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

Как я могу правильно запустить поповер?

1 Ответ

0 голосов
/ 10 февраля 2020

В поповере: v-if="notAuthenticated"

На кнопке: @click="checkAuth"

В крючках: 

data() {
    return {
        notAuthenticated: false
    }
},
methods: {
    checkAuth () {
        if (this.isAuthenticated)
            //do whatever
        } else {
            this.notAuthenticated= true;
        }
    }
}

и изменить notAuthenticated обратно при всплытии закрывается, кнопка нажата и т. д. c.

...