vue 用driver 添加用户引导

npm 安装： npm install driver.js

//用户引导
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
Vue.prototype.$driver = new Driver({
    allowClose: false, //禁止点击外部关闭
    doneBtnText: '完成', // 完成按钮标题
    closeBtnText: '关闭', // 关闭按钮标题
    stageBackground: '#fff', // 引导对话的背景色
    nextBtnText: '下一步', // 下一步按钮标题
    prevBtnText: '上一步', // 上一步按钮标题
})

　　

showHelp() {
      const driver = this.$driver;
      // 定义介绍的步骤
      driver.defineSteps([
        {
          element: ".chooseHelp",
          popover: {
            title: "选课帮助",
            description: "1.点击加入选课栏，可以把课程添加到选课栏",
            position: "top"
          }
        }
        // {
        //   element: '#',
        //   popover: {
        //     title: '选课帮助',
        //     description: '2.刚才所选的课程 全部都在这里哦！',
        //     position: 'left'
        //   }
        // }
      ]);

      // 开始介绍
      driver.start();
    },

<el-button round icon="iconfont icon-bangzhu" class="chooseHelp" @click="showHelp()" >选课帮助</el-button>

.chooseHelp {
      background: linear-gradient(#01a2f0, #68d3f6);
      color: #fff;
      border: none;
      margin-bottom: 20px;
    }

参考文档：https://zhuanlan.zhihu.com/p/80360372