新手引导页intro.js

参考文章：

blog.csdn.net/SheepOnTheC…

www.cnblogs.com/badaoliuman…

npm install intro.js --save

import intro from 'intro.js' // introjs库
import 'intro.js/introjs.css' // introjs默认css样式
import 'intro.js/themes/introjs-modern.css' // introjs主题
Vue.prototype.$intro = intro

data(){
  return{
    introOption: {
      // 这里是更换成中文（默认英文）
      prevLabel: "上一步",
      nextLabel: "下一步",
      // skipLabel: "跳过",
      doneLabel: "完成",
      steps: [],
    }, // 参数对象
  }
}

methods:{
  initGuide() {
    // 绑定标签元素的选择器数组
    this.introOption.steps = [
      {
        title: '名称',
        element: ".user-name",
        intro: "步骤1：step1!",
      },
      {
        element: ".tips-box",
        intro: "步骤2：step2!",
      },
      {
        element: ".data-top",
        intro: "步骤3：step3!",
      },
      {
        element: "#step4",
        intro: "步骤4：step4!",
      },
    ];
    this.$intro()
      .setOptions(this.introOption)
      .start();
  },  
}

mounted() {
  // 挂载完以后再调用
  this.initGuide();
},