前端页面分步引导库：Driver.js

介绍：帮助用户更快的熟悉系统功能
优点：轻量级，免费

1.插件安装（vue）

npm install driver.js

2.main.js中引入包对应的JS和CSS

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: '上一步', // 上一步按钮标题
});

3.设置引导步骤

this.$driver.defineSteps([{
  element: '#status2',//元素的id     
  popover: {
    title: '弹窗标题',           
    description: '内容描述',           
    position: 'top'       
  }   
}]);

this.$driver.start();

4.样式更改

标题颜色

div#driver-popover-item .driver-popover-title {
  color: #1890ff;
}

按钮样式

div#driver-popover-item .driver-popover-footer .driver-next-btn {
  background-color: #1890ff;
  color: white;
  text-shadow: none;
  border-radius: 4px;
}