vue-tour 是一个轻量级、简单且可定制的新手引导组件。它提供了一种快速简便的方法来指导您的用户完成您的应用程序。
使用方法
通过 npm 安装 vue-tour 组件
npm install vue-tour
然后在项目入口文件里，main.js 里面注册 VueTour 组件，注意默认样式也要引入进去，不过我们也可以自定义样式，只需要覆盖默认样式即可。
import Vue from 'vue'
import App from './App.vue'
import VueTour from 'vue-tour'
require('vue-tour/dist/vue-tour.css')
Vue.use(VueTour)
new Vue({
render: h => h(App)
}).$mount('#app')
接下来在需要引导的组件里面引入即可。
<template>
<div>
<div id="v-step-0"></div>
<div class="v-step-1"></div>
<div data-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
header: {
title: 'Get Started',
},
content: `Step1 <strong>Vue Tour</strong>!`
},
{
target: '.v-step-1',
content: 'step2'
},
{
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>
steps参数配置的是每一步的提示元素。header是标题。content是内容。params是提示的参数，可以配置弹窗的位置，比如右侧可以配置placement为left。
这样一个完整的提示就完成啦，是不是非常简单。
具体效果可以查看 vue-tour
