VUE项目中如何使用vue-tour 新手引导

vue-tour实现效果

vue-tour实现相当于给一个div添加了一个tooltip，不像vue-intro那样有高亮显示

如何使用vue-tour

//首先npm下载vue-tour
npm install vue-tour

//然后在main.js中全局引入
import VueTour from 'vue-tour'

require('vue-tour/dist/vue-tour.css')

Vue.use(VueTour)

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

//在vue页面中使用vue-tour
<el-input id="v-step-11"  v-model="form" autocomplete="off"  class="form-input"></el-input>
<el-input id="v-step-12" v-model="form" autocomplete="off"  class="form-input"></el-input>
<v-tour name="myTour" :steps="steps" v-if="ifIntro" :options="myOptions" :callback="myCallback"></v-tour>

export default {
  data () {
  	return {
  		ifIntro:false, //是否页面加载的时候就显示
		steps: [
	        {
	          target: '#v-step-11',  // 目标 要与上面的id相对应
	          content: `1.test1`, //显示文本内容
	          params: {
	            placement: 'right' //显示方向
	          }
	        },
	        {
	          target: '#v-step-12',
	          content: `2.test2`,
	          params: {
	            placement: 'top'
	          }
	        }
	    ],
        myOptions: {
        	useKeyboardNavigation: false, //是否可用键盘来控制前进后退...
	        labels: { //上一步下一步等提示内容，如果页面只有一个tour，只显示一个button
	          buttonSkip: '退出',  
	          buttonPrevious: '上一步',
	          buttonNext: '下一步',
	          buttonStop: '结束'
	     	}
      	},
      	myCallbacks: {
     		onStart: this.myonStart, // 在您开始游览时调用
			onStop: this.myonStop, //停止游览时调用
		    onPreviousStep: this.myonPreviousStep, //转到上一步时调用
		    onNextStep: this.myonNextStep //进行下一步时调用
		}
	 }
  }
},

created () {
	this.ifIntro = true //在created里改变ifIntro的状态
}

mounted () {
	//if (sessionStroage.getItem('aaa')) {
	//	this.$tours['myTour'].start()
	//}
	this.$tours['myTour'].start() //在mounted里调用tour的start方法
}

methods: {
	myonStart () {
		return false
	},
	myonStop () {
		this.$route.push({name:'home'})
	},
	myonPreviousStep (currentStep) {
		console.log(currentStep) //步长
		if (currentStep === '2) {
			console.log('vue-tour')
		}
	},
	myonNextStep (currentStep) {
		console.log(currentStep)
	}
}

注意：如果你vue多个页面用到了vue-tour，id不要重复，不然d属性会被覆盖掉，比如你A页面的input，id="v-step-1"的params的placement为top，B页面的input的id="v-step-1"的params的placement为left，这时候B页面的提示就会变成top，所以id值是唯一的,最好不要重复