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 shows
• steps: Array
  • el: String Selector of DOMElement
  • text: Any Text for step
  • position: String Text position, values top bottom left right
  • cancelPosition: 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 change
• end: When the end of the tour
• cancel: When the tour is cancelled