1.首先在项目中下载引入
npm install vue-tour
2.在main.js
import VueTour from 'vue-tour'
require('vue-tour/dist/vue-tour.css')
Vue.use(VueTour)
3.最后在使用的页面引入就ok
<template>
<div>
<div id="v-step-0">A DOM element on your page. The first step will pop on this element because its ID is 'v-step-0'.</div>
<div class="v-step-1">A DOM element on your page. The second step will pop on this element because its ID is 'v-step-1'.</div>
<div style="height:3000px;"></div>
<div data-v-step="2">A DOM element on your page. The third and final step will pop on this element because its ID is 'v-step-2'.</div>
<v-tour name="myTour" :steps="steps"></v-tour>
</div>
</template>
<script>
export default {
name: 'my-tour',
data () {
return {
steps: [
{
target: '#v-step-0', // We're using document.querySelector() under the hood
content: `Discover <strong>Vue Tour</strong>!`
},
{
target: '.v-step-1',
content: 'An awesome plugin made with Vue.js!'
},
{
target: '[data-v-step="2"]',
content: 'Try it, you\'ll love it!<br>You can put HTML in the steps and completely customize the DOM to suit your needs.',
params: {
placement: 'top'
}
}
]
}
},
mounted: function () {
this.$tours['myTour'].start()
}
}
</script>
至此是最基础的写法，当然也可以参考api
可以在初始化项目是传入:options
1.useKeyboardNavigation
如果设置为true，则可以使用←、→和ESC键来导航整个tour（默认为true）。
<v-tour name="myTour" :steps="steps" :options="myOptions"></v-tour>
myOptions:{
useKeyboardNavigation: false, //不使用←、→和ESC键来导航tour
},
2.startTimeout
定义循环开始之前的等待时间。
myOptions:{
useKeyboardNavigation: false, //不使用←、→和ESC键来导航tour
startTimeout: 1000, //1秒后执行
},
3.labels
因为默认步骤名称是英文所以可以通过labels来修改
myOptions:{
useKeyboardNavigation: false, //不使用←、→和ESC键来导航tour
startTimeout: 1000, //1秒后执行
labels: {
buttonSkip: '跳过',
buttonPrevious: '上一步',
buttonNext: '下一步',
buttonStop: '关闭'
}
},
插槽
可以使用插槽广泛的修改每一步的内容
示例：该组件包含一个默认插槽，该插槽将v-for循环包装在作为道具传递的步骤上。步骤本身包含两个插槽:一个内容插槽和一个操作插槽。然后，如果你想覆盖DOM的步骤，你可以这样做覆盖插槽:
<v-tour name="myTour" :steps="steps" :options="myOptions">
<template slot-scope="tour">
<transition name="fade">
<v-step
v-if="tour.currentStep === index"
v-for="(step, index) of tour.steps"
:key="index"
:step="step"
:previous-step="tour.previousStep"
:next-step="tour.nextStep"
:stop="tour.stop"
:is-first="tour.isFirst"
:is-last="tour.isLast"
:labels="tour.labels"
>
<template v-if="tour.currentStep === 0">
<div slot="content">
<el-button type="success" icon="el-icon-check" circle></el-button>
</div>
<div slot="actions">
<button @click="tour.previousStep" class="btn btn-primary">上一步</button>
<button @click="tour.nextStep" class="btn btn-primary">下一步</button>
<button @click="tour.stop" class="btn btn-primary">关闭</button>
</div>
</template>
</v-step>
</transition>
</template>
</v-tour>
修改的第一步.jpg
Callbacks回调函数
Vue Tour提供回调，允许您在Tour的不同时刻执行自定义操作
要使用回调，请在v-tour组件中添加:
<v-tour name="myTour" :steps="steps" :options="myOptions" :callbacks="myCallbacks"> </v-tour>
myCallbacks: {
onPreviousStep: this.myCustomPreviousStepCallback, //在data中定义两个回调
onNextStep: this.myCustomNextStepCallback
},
myCustomPreviousStepCallback (currentStep) { //methods
console.log('[Vue Tour] A custom previousStep callback has been called on step ' + (currentStep + 1))
},
myCustomNextStepCallback (currentStep) {
console.log('[Vue Tour] A custom nextStep callback has been called on step ' + (currentStep + 1))
if (currentStep === 1) {
console.log('[Vue Tour] A custom nextStep callback has been called from step 2 to step 3')
}
}
现在只支持四种回调函数
Features 特性
1.highlight
通过将highlight选项设置为true，可以突出显示当前步骤中的元素
myOptions:{ highlight: true, }
设置步骤参数的params进行单个设置
steps: [
{
target: '[data-v-step="2"]',
content: 'Try it, you\'ll love it!<br>You can put HTML in the steps and completely customize the DOM to suit your needs.',
params: {
placement: 'top',
highlight: false //不显示
}
}
]
如果是定制化的模板需要在v-step组件中传入
<v-step
v-if="tour.currentStep === index"
v-for="(step, index) of tour.steps"
:key="index"
:step="step"
...
:highlight="tour.highlight"
>
默认是一个框
默认
如果需要修改可以修改class类.v-tour__target--highlighted
.v-tour__target--highlighted {
box-shadow: 0 0 0 99999px rgba(0,0,0,.4);
}
修改后
