vue-tour使用

vue-tour是Vue组件，用来实现引导教程步骤功能
1.npm安装

npm install vue-tour --save

2.在main.js文件中引入

import VueTour from 'vue-tour'
import  'vue-tour/dist/vue-tour.css'
Vue.use(VueTour)

3.在需要使用vue-tour的页面中使用

<!-- 引导绑定第一步引导块 这里可以使用class也可以使用id 来绑定-->
<div class="v-step-0"></div>
<!-- 引导绑定第二步引导块 -->
<div class="v-step-1"></div>
<!-- 引导组件 -->
<v-tour name="myTour" :steps="steps" :options="myOptions" :callbacks="myCallbacks"></vue-tour>

data () {
    return {
          myOptions: {
        	// 是否启动阴影指导(如果你不设置阴影class 它实际上只有一个框框)
            highlight: true,
            labels: { // 按钮中文显示
				  buttonSkip: '跳过引导教程',
				  buttonPrevious: '上一步',
				  buttonNext: '下一步',
				  buttonStop: '结束'
				}
      		},
	      // 引导样式和语数
	      steps: [
	        {
	          // 绑定你设置的步骤名, class选择器或者是id选择器
	          target: '.v-step-0',
	          // 这里是导航提示的内容 支持div元素可以设置class
	          header: {
	              title: 'Get Started',
	            },
	          content: `Discover <strong>Vue Tour</strong>!` // content可以支持html格式
	          params: {
	            // 这里是设置在哪个位置显示 top right ......
	            // 不写默认是bottom
	            placement: 'right',
	            // 是否启动阴影指导(如果你不设置阴影class 它实际上只有一个框框)
	            // highlight: true 这里可以在myOptions统一设置
	          }
	        },
	        {
	          target: '.v-step-1',
	          content: '这是步骤2的内容'
	        }
	      ],
	     myCallbacks: { //可以自定义回调函数，做一些自己的操作
		    onPreviousStep: this.myCustomPreviousStepCallback,
		    onNextStep: this.myCustomNextStepCallback
		  }
   	}
 },
 mounted() {
      this.$tours['myTour'].start() // 启动引导
  },
  methods: {
	  myCustomPreviousStepCallback (currentStep) { //点上一步时触发
	    // currentStep：当前步数，从0开始
	    // ......
	  },
	  myCustomNextStepCallback (currentStep) {//点下一步时触发
	    if (currentStep === 1) {
	      // ......
	    }
	  }
	}
<style scoped>
	//该组件默认是没有阴影的 你需要单独在当前页面的style中添加一个css 实现引导阴影效果
	.v-tour__target--highlighted { // 必须
	  	box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
	}
	//修改vue-tour的默认样式, 需要加上::v-deep，否则不生效
	::v-deep .v-step {
		width: 400px;
	  	max-width: none;
	  	font-size: 18px;
	}
<style>

注意：
1.如果绑定步骤的元素本身使用了定位（非相对定位），在执行步骤时会造成元素位置错乱。
解决方法：可在定位的元素内包一层不定位的div，再将步骤绑定到该div上
2.如果页面上有多个定位的元素，并且都设置了z-index , 在执行步骤的时候会出现阴影盖不住其他定位的元素，会造成页面上出现多个高亮显示元素的错觉。
解决方法：使用自定义的回调函数，当currentStep（当前步骤）到哪一步时，提高该元素的z-index，不是这一步时，要恢复之前的z-index