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

最新推荐文章于 2025-05-17 23:42:37 发布

Making_Bug

最新推荐文章于 2025-05-17 23:42:37 发布

阅读量5.3k

点赞数 2

本文链接：https://blog.youkuaiyun.com/Making_Bug/article/details/103487964

版权

本文介绍了在Vue项目中使用vue-tour进行新手引导的方法，特别提醒在多个页面使用时要注意id的唯一性，避免因id重复导致的提示位置错误问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
	}
}