vue + introjs 做新手引导 爬坑

introjs  在github 上下载了一堆案例 很丰富强大 也很多坑 它有一个多页模式的引导 

但是 在同一个页面的引导必须保证你需要的元素都生成完了 再启动这个指导  好吧 坑深的爬不起来了 只能自己写了 当然在同一个页面所有元素都生成了 用这个还是很方便的 值得一提的是 它的点击 跳过 点击背景 点击结束引导都会调用同一个回调函数 onexit()  而且没有返回当前是哪个元素点击的 所以也是坑  

首先项目里引入 

1 安装 npm i vue-introjs intro.js --save  

2 在main.js 引入 

   import VueIntro from 'vue-introjs';

   Vue.use(VueIntro); 

   import 'intro.js/introjs.css';

3 在 webpack.config.js 里添加 

plugins: [

new webpack.ProvidePlugin({

introJs: ['intro.js', 'introJs']

})

],

直接用.cli 生成的就在 

这样就可以在对应的页面去用了 之前有过项目没有用.vue 页面写 总是报introJs 找不到 

原因没找到 但建议大家都放到 .vue 页面写 开始放代码拉 

startIntro() {
      var intro = introJs();
      intro.setOptions({
        nextLabel: "下一步",
        skipLabel: "跳 过",
        doneLabel: "结束引导",
        steps: [
          {
            element: "#v-step3",
            intro:
              "单击“上传”按钮，可上传单张有描述的图片素材，同时也支持“批量上传”多张图片素材。",
            position: "right"
          },
          {
            element: "#v-step2",
            intro:
              "“鼠标拖动”素材到场景中，可调整素材在场景中的位置、大小、角度。",
            position: "right"
          },
          {
            element: "#v-step1",
            intro:
              "还可以通过选择色调模板，改变整个场景（不包括图片素材）的色调。",
            position: "right"
          },
          {
            element: "#v-step4",
            intro:
              "这里还有常用的素材操作指南：素材的选择、大小、位置、角度、删除。",
            position: "right"
          },
          {
            element: "#v-step6",
            intro:
              "单击“设置音乐”按钮，打开音乐设置窗口，选择或上传MP3背景音乐，为场景添加背景音乐",
            position: "bottom"
          },
          {
            element: "#v-step7",
            intro:
              "设置好场景的素材后，单击“保存”按钮，就可以分享展厅到朋友圈/好友。",
            position: "bottom"
          }
        ]
      });

      var $this = this;
      intro.start().onexit(function() {
        // 点击结束引导 变状态
        if($this.isIframe){
          window.parent.postMessage({type: 'isGuide', data: false}, '*')
        }

      });
    }

 一个页面好调用 样式也好修改  可以看看它的源码 有很多调用的函数 单页面 和 多页面都可以用 最大的坑就是 一定要等所有元素都生成了 才可以启动   我发现 其实有时候很多简单的东西总是容易被复杂化 因为每个人都有每个人的思维 希望我的产品和我的思维是一样的哈 。。。 爬坑之路继续