This is a Vue wrapper for the Shepherd, site tour, library.
npm install chicaga-tour --save
Import styles to App.vue:
@import '~chicaga-tour/dist/chicaga-tour.min.css';
When using with a module system, you must explicitly install chicaga-tour via Vue.use():
import Vue from 'vue';
import ChicagaTour from 'chicaga-tour';
Vue.use(ChicagaTour);
<template>
<div class='tour-example'>
Testing
</div>
</template>
<script>
export default {
name: 'TourExample',
mounted() {
this.$nextTick(() => {
const tour = this.$shepherd({
useModalOverlay: true
});
tour.addStep({
title: 'Реферальная программа',
text: 'При клике на аватарку или ФИО вы попадете в <b>личный кабинет</b>,где сможете изменить свои данные.\
При клике на стрелочку появится меню где расположены кнопки для связи с куратором,\
опционально с преподавателем, <i>зависит от тарифа</i>, так же настройки личного кабинета.',
attachTo: {
element: '.tour-example',
on: 'bottom'
},
buttons: [
{
action() {
return this.cancel();
},
classes: 'shepherd-button-secondary',
text: 'Пропустить'
},
{
action() {
return this.next();
},
text: 'Далее'
}
],
id: 'creating'
});
tour.start();
});
}
};
</script>