Использование с Vue

Для интеграции Driver.js с Vue-проектом необходимо сначала установить библиотеку через npm:

npm install driver.js

После установки подключение происходит в основном файле приложения, например, main.js или внутри компонента:

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';

Использование CSS важно, так как оно обеспечивает корректное отображение подсказок и выделений элементов на странице.

Инициализация Driver.js внутри Vue-компонента

Создание экземпляра Driver осуществляется внутри методов компонента или в mounted хуке:

export default {
  name: 'TourExample',
  mounted() {
    this.initTour();
  },
  methods: {
    initTour() {
      const driver = new Driver({
        allowClose: false,        // Запретить закрытие по клику вне подсказки
        overlayClickNext: true,   // Клик по оверлею переходит к следующему шагу
        doneBtnText: 'Готово',   // Текст кнопки завершения
        nextBtnText: 'Далее',    // Текст кнопки следующего шага
        prevBtnText: 'Назад',    // Текст кнопки предыдущего шага
        padding: 10               // Отступ вокруг выделяемого элемента
      });

      driver.defineSteps([
        {
          element: '#step1',
          popover: {
            title: 'Этап 1',
            description: 'Описание первого элемента',
            position: 'bottom'
          }
        },
        {
          element: '#step2',
          popover: {
            title: 'Этап 2',
            description: 'Описание второго элемента',
            position: 'top'
          }
        }
      ]);

      driver.start();
    }
  }
}

Ключевые моменты:

  • element — CSS-селектор элемента, который необходимо подсветить.
  • popover.title и popover.description — заголовок и описание для шага.
  • position — позиция всплывающей подсказки относительно элемента (top, bottom, left, right).

Управление жизненным циклом тура в Vue

Driver.js предоставляет методы для управления туром после его запуска:

driver.start();       // Запуск тура
driver.reset();       // Сброс всех шагов
driver.next();        // Переход к следующему шагу
driver.previous();    // Переход к предыдущему шагу
driver.highlight('#step3'); // Подсветка конкретного элемента вне последовательности

В Vue эти методы можно вызывать через ref или хранить экземпляр Driver в data для глобального доступа внутри компонента:

data() {
  return {
    tourDriver: null
  }
},
mounted() {
  this.tourDriver = new Driver();
},
methods: {
  startTour() {
    this.tourDriver.defineSteps([...]);
    this.tourDriver.start();
  }
}

Динамические шаги и реактивность

Для приложений Vue важно учитывать, что элементы DOM могут рендериться динамически через v-if или v-for. Driver.js требует, чтобы элементы были в DOM на момент вызова highlight или start.

Пример динамической генерации шагов:

computed: {
  tourSteps() {
    return this.items.map((item, index) => ({
      element: `#item-${index}`,
      popover: {
        title: `Элемент ${index + 1}`,
        description: item.description,
        position: 'right'
      }
    }));
  }
},
methods: {
  startDynamicTour() {
    const driver = new Driver();
    driver.defineSteps(this.tourSteps);
    driver.start();
  }
}

Особенности: при использовании динамических элементов рекомендуется запускать тур после того, как Vue отрендерил все элементы, например, внутри $nextTick():

this.$nextTick(() => {
  driver.start();
});

Настройка стилей и кастомизация подсказок

Driver.js поддерживает кастомизацию внешнего вида подсказок через CSS или опции при инициализации:

const driver = new Driver({
  className: 'custom-driver', // Класс для кастомизации всех подсказок
  opacity: 0.7,               // Прозрачность оверлея
  padding: 15
});

Пример CSS:

.custom-driver .driver-popover {
  background-color: #f5f5f5;
  color: #333;
  border-radius: 8px;
  font-size: 14px;
}

Можно задавать индивидуальные стили для каждого шага через popover.className.

Интеграция с Vue Router

Для приложений с маршрутизацией тур может распространяться на несколько страниц. Для этого необходимо запускать соответствующий шаг после перехода на нужный маршрут:

watch: {
  $route(to, from) {
    if (to.name === 'Dashboard') {
      this.$nextTick(() => {
        this.startTourForDashboard();
      });
    }
  }
}

Использование $nextTick() гарантирует, что элементы страницы полностью загружены перед подсветкой.

События Driver.js

Driver.js предоставляет события, на которые можно подписываться в Vue:

driver.on('next', (step) => {
  console.log('Переход к шагу:', step);
});

driver.on('complete', () => {
  console.log('Тур завершён');
});

driver.on('close', () => {
  console.log('Тур закрыт пользователем');
});

В Vue это удобно использовать для изменения состояния компонента или логирования действий пользователя.

Комбинация с Vuex и глобальным состоянием

Для комплексных приложений можно хранить состояние тура в Vuex, что позволяет запускать тур в разных компонентах, сохраняя прогресс:

mutations: {
  setTourStep(state, step) {
    state.currentStep = step;
  }
}

События Driver.js (next, previous) могут обновлять Vuex состояние, а компоненты — реагировать на изменения для условного отображения элементов или подсказок.

Поддержка мобильных устройств

Driver.js адаптивен, но иногда требуется дополнительная настройка:

  • Использовать padding для предотвращения наложения на элементы интерфейса.
  • Проверять позицию подсказки (position) для элементов на малых экранах.
  • Для сложных интерфейсов использовать кастомные медиазапросы в CSS подсказок.

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

Оглавление