vue-tour-easy
0.0.3 • Public • Published 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, values top bottom left rightcancelPosition: Cancel button position, values top 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
Package Sidebar
Install
Weekly Downloads