vue-tour-easy
Easy tour Vue.js 2 component.
Installation
npm install vue-tour-easy --save
Usage
<template>
<div>
<div id="a"></div>
<div class="b"></div>
<tour v-model="show" :steps="steps"/>
</div>
</template>
<script>
import Tour from 'vue-tour-easy'
export default {
components: {
Tour
},
data() {
return {
show: true,
steps: [
{
el: '#a',
text: 'First Step',
position: 'top'
},
{
el: '.b',
text: 'Second Step',
position: 'bottom right',
cancelPosition: 'top'
}
]
}
}
}
</script>
Properties
show
:Boolean
Whether the tour showssteps
:Array
el
:String
Selector of DOMElementtext
:Any
Text for stepposition
:String
Text position, valuestop
bottom
left
right
cancelPosition
: Cancel button position, valuestop
bottom
Slots
replace text
<tour v-model="show" :steps="steps">
<div>{{ steps[stepIndex].text }}</div>
</tour>
replace cancel button
<tour v-model="show" :steps="steps">
<button slot="cancel">cancel</button>
</tour>
Events
step
: When the steps changeend
: When the end of the tourcancel
: When the tour is cancelled