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

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

Чтобы уменьшить ширину элемента shepherd, мы добавим класс width-limit, как показано ниже. Вы можете объявить несколько классов, которые будут применяться к элементу shepherd. Пока мы будем применять только один класс. Необходимо удалить scoped из объявления стиля, поэтому будьте очень внимательны.

Мы также изменим параметр on внутри attachTo, который выбирает позиционирование пастуха стрелки/элемента, мы изменим его с «top» на «right-end».

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

      tour.addStep({
        classes: 'width-limit',
        attachTo: { element: '#shepherd-teste', on: 'right-end' },
        text: 'Test'
      });

      tour.start();
      });
    }

И декларация стиля

.width-limit {
  max-width: 200px;
}

А вот так выглядит наш элемент, уменьшенный и отрендеренный справа.

Возможно, вы заметили, что при смене места стрелка, указывающая на выделяемый элемент, оказалась «вне квадрата», и это вас немного беспокоит. Чтобы исправить подобную ситуацию, мы используем модификатор поппера под названием ‘arrow’, поэтому опция popperOptions выглядит следующим образом:

popperOptions: {
  modifiers: [{ name: 'offset', options: { offset: [0, 50] } }, 
              { name: 'arrow', options: { padding: 20 } }]
}

И элемент выглядит следующим образом (гораздо более презентабельно), при этом стрелка смещена к центру, а элемент находится на том же месте. Я использовал значение 20, потому что это имеет смысл для примера, но вы можете тестировать с положительными и отрицательными значениями.

Чтобы сделать элемент более полным, мы можем добавить заголовок и добавить кнопку отмены урока. Используемые параметры будут cancelIcon и title. Важно отметить, что опция cancelIcon представляет собой объект со свойством enabled, которое является булевым значением.

Внешний вид и код выглядят следующим образом:

this.$shepherd({
          useModalOverlay: true,
          defaultStepOptions: {
            cancelIcon: {enabled: true},
            popperOptions: {
              modifiers: [{ name: 'offset', options: { offset: [0, 50] } }, 
              { name: 'arrow', options: { padding: 20 } }]
            }
         }
});

tour.addStep({
  classes: 'width-limit',
  attachTo: { element: '#shepherd-teste', on: 'right-end' },
  title: 'Test Title',
  text: 'Test'
});

Продолжение следует…