vue-tourguide
vue-tourguide is a Vue plugin for web wizard.
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 |