Использование shepherdjs для создания туров в приложении nuxt (vue.js) (часть 1)

Поскольку я не видел никакого контента на pt-BR, обучающего основам shepherdjs, я решил сделать этот небольшой учебник. В этом примере я расскажу, как использовать shepherdjs вместе с vue.js и nuxt.

Здесь вы можете найти репозиторий проекта.

Прежде всего, давайте загрузим библиотеку, предназначенную для vue:

Вы можете использовать несколько подходов, здесь я покажу, как использовать shepherdjs в качестве плагина:

Создайте файл shepherd.js в папке plugins со следующим содержимым:

import Vue from 'vue';
import VueShepherd from 'vue-shepherd';
import 'shepherd.js/dist/css/shepherd.css';
Vue.use(VueShepherd);

А в файле nuxt.config.js вы должны объявить плагин следующим образом:

  plugins: [
    '@/plugins/shepherd'
  ],

Внутри нужного компонента можно инициализировать тур и добавить шаги, используя жизненный цикл mounted (согласно примеру, существующему на официальном github):

mounted() {
      this.$nextTick(() => {
        const tour = this.$shepherd({
          useModalOverlay: true
        });

        tour.addStep({
          attachTo: { element: this.$el, on: 'top' },
          text: 'Test'
        });

        tour.start();
      });
    }

Ладно, пока все хорошо, все круто. Но если вы пытаетесь использовать shepherdjs, вы уже заметили, что официальная документация довольно общая, когда дело доходит до настройки поведения. Поэтому давайте рассмотрим некоторые ключевые вопросы.

В дидактических целях я создал простой компонент с id под названием shepherd-teste, и мы будем использовать его для примеров ниже.

Первым пунктом, который необходимо рассмотреть, является defaultStepOptions, потому что в нем мы получаем возможность настраивать все шаги тура.

Внутри defaultStepOptions мы можем поместить опцию popperOptions (да, shepherdjs использует поппер под прикрытием), которая позволяет нам использовать опции поппера. В этом случае мы можем использовать опцию offset для управления тем, насколько далеко стрелка/стрелки находятся внутри или в стороне от элемента, на который ссылаются.

Наша экскурсия начинается со следующего лица:

mounted() {
      this.$nextTick(() => {
        const tour = this.$shepherd({
          useModalOverlay: true,
          defaultStepOptions: {
            popperOptions: {
              modifiers: [{ name: 'offset', options: { offset: [0, 50] } }]
            }
          }
        });

        tour.addStep({
          attachTo: { element: '#shepherd-teste', on: 'top' },
          text: 'Test'
        });

        tour.start();
      });
    }

Где [0, 50], выбирает, будет ли наша стрелка (и, следовательно, элемент, созданный пастухом) дальше или ближе к выделенному элементу (на который ссылается attachTo). Чем выше второе число, тем дальше будет находиться стрелка/элемент.

Пример с [0, 50]:

Пример с [0, 0]:

Перейти к части 2.