vue-tour-easy

0.0.3 • Public • Published

vue-tour-easy

npm npm npm npm

github

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

Package Sidebar

Install

npm i vue-tour-easy

Weekly Downloads

15

Version

0.0.3

License

MIT

Unpacked Size

19.5 kB

Total Files

9

Last publish

Collaborators

  • cweili