vue-tourguide

vue-tourguide is a Vue plugin for web wizard.

Demo

• Demo

🚀 Installation

npm install vue-tourguide --save

Introducing plugins

import Vue from 'vue'
import App from './App.vue'
import vueTourguide from 'vue-tourguide'

Vue.use(vueTourguide)

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

Using in .vue

<tourguide :tourConfigList="tourConfigList" :show="show" @closeTour="closeTour"></tourguide>

tourConfigList detail

this.tourConfigList.push( {
     displayPosition: "left-top",
     elements: [this.$refs.light],
     axisType: "x",
     desc: "this is a title",
     maxWidth: 200，
     id: "this is a title"
})

Parameters	Type's	Default	Required	Description
elements	Array	null	Required	Elements that need to be highlighted may need to be passed in the nextTick
displayPosition	String	left-down	Optional	describe the location of the text display,include "left-down","left-top","right-down","right-top"
axisType	String	y	Optional	how to show the arrow,include "x","y"
desc	String	null	Required	wizard text
maxWidth	String	null	Optional	the maximum length of the description text.if it exceeds the length,it willwrap
id	String	null	Optional	used to bind key values to reduce repeated rendering

event

Parameters	Description
closeTour	close wizard callback