vue中提示框Vue-tour

安装模块依赖

npm install vue-tour
在main.js中的配置：import VueTour from ‘vue-tour’
引入相关css:require(‘vue-tour/dist/vue-tour.css’)
使用配置：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);
    }
  }