Install module dependencies
npm install vue-tour
configuration in main.js: import VueTour from'vue-tour' to
introduce related css: require('vue-tour/dist/vue-tour.css')
use configuration: Vue.use(VueTour)
<v-tour name="myTour" :steps="steps" v-if="ifIntro" :options="myOptions" :callbacks="myCallbacks"></v-tour>
data() {
return {
ifIntro: false, //是否页面加载的时候就显示
steps: [
{
target: "#v-step-1",
content: "<h1 style='color:red;'>标题1</h1>",
header: {
title: "<h1 style='color:#fff'>Get Started</h1>"
},
params: {
placement: "right"
}
}
],
// 设置点击按钮
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() {
this.$tours["myTour"].start(); //在mounted里调用tour的start方法
},
methods: {
myonStart() {
return true;
console("开始调用");
},
myonStop() {
console.log("停止调用");
},
myonPreviousStep(currentStep) {
console.log("转到上一步时调用当前索引值:", currentStep); //步长
},
myonNextStep(currentStep) {
console.log("进行下一步时调用当前索引值:", currentStep);
}
}