vue中提示框driver.js

安装模块依赖：

yarn add driver.js
npm install driver.js

创建独立步骤配置guide.js文件：

const steps = [
  {
    element: "#guide-menu",
    popover: {
      className: "box", //添加新类
      title: "菜单导航",
      description: "点击菜单可切换右侧菜单内容",
      position: "top",
      offset: 200 //左偏移量
    }
  },
  {
    element: "#collapse-box",
    popover: {
      className: "box",
      title: "汉堡包",
      description: "点击收缩和展开菜单导航",
      position: "bottom"
    }
  }
];
export default steps;

在需要用到主键中的配置：

<script>
import Driver from "driver.js";
import "driver.js/dist/driver.min.css";
import steps from "../../vendor/guide";
export default {
  data() {
    return {
      driver: null
    };
  },
  mounted() {
    this.driver = new Driver({
      className: "scoped-class", // 包装driver.js popuver的类名
      animate: true, // 更改突出显示元素时设置动画
      stageBackground: "red", //elemnt元素的背景色
      opacity: 0.75, // 背景不透明度（0表示仅弹出且不覆盖）
      padding: 10, // 对象元素（唯一id）与边缘的距离
      allowClose: true, //点击覆盖是否应该关闭      当allowClose，overlayClickNext这些两个为false时，点击其他部分不触发改变提示
      overlayClickNext: true, // 如果它移动到覆盖单击的下一步
      doneBtnText: "完成", // 最后一个按钮上的文本
      closeBtnText: "关闭", // 此步骤的“关闭”按钮上的文本
      nextBtnText: "下一个", // 此步骤的下一个按钮文本
      prevBtnText: "上一个", //此步骤的上一个按钮文本
      showButtons: true, // 是否在页脚中显示控制按钮
      keyboardControl: true, // 允许通过键盘进行控制（退出以关闭，箭头键移动）
      scrollIntoViewOptions: {}, // 我们尽可能使用“scrollIntoView（）”，如果需要，请在此处传递选项
      onHighlightStarted: Element => {
        console.log("即将突出显示");
      }, // 当elemnt即将突出显示时调用
      onHighlighted: Element => {
        console.log("完全突出显示");
      }, // 当元素完全突出显示时调用
      onDeselected: Element => {
        console.log("取消");
      }, // 取消选择元素时调用（点击下一个）
      onReset: Element => {
        console.log("清除");
      }, // 覆盖即将清除时调用
      onNext: Element => {
        console.log("下一步");
      }, // 在任何步骤转到下一步时调用
      onPrevious: Element => {
        console.log("上一步");
      } //在任何步骤转到上一步时调用
    });

    // 单个driver--start
    // const stepDefinition = {
    //   element: "#guide-menu",
    //   stageBackground: "#ffffff",
    //   popover: {
    //     className: "popover-class",
    //     title: "Title",
    //     description: "Description",
    //     showButtons: true,
    //     doneBtnText: "Done",
    //     closeBtnText: "Close",
    //     nextBtnText: "Next",
    //     prevBtnText: "Previous"
    //   },
    //   onNext: () => {},
    //   onPrevious: () => {}
    // };
    // this.driver.highlight(stepDefinition);
    // 单个driver--end

    //判断drive是否存在
    // if (this.driver.isActivated) {
    //   console.log("Driver is active");
    // }
    this.guide(); //  正常显示
  },
  methods: {
    //不正常显示
    guide() {
      this.driver.defineSteps(steps); // 定义步骤
      this.driver.start(); //开始执行
    }
  }
};
</script>


driver.defineSteps([ stepDefinition1, stepDefinition2, stepDefinition3 ]);
driver.start(stepNumber = 0);  
driver.moveNext();             //转到步骤列表中的下一步
driver.movePrevious();         //移动到步骤列表中的上一步
driver.hasNextStep();          //检查是否有下一步要移动到
driver.hasPreviousStep();      //检查是否有上一步要移动到
//执行一些异步任务并手动转到下一步
driver.preventMove();

//使用查询选择器或步骤定义突出显示元素
driver.highlight(string|stepDefinition);

//重新定位弹出窗口和突出显示的元素
driver.refresh();

//重置覆盖并清除屏幕
driver.reset();

//此外，还可以传递布尔参数
//立即清除，不做动画等
//一个正在运行的驱动程序的另一个实例
driver.reset(clearImmediately = false);

//检查是否有突出显示的元素
if(driver.hasHighlightedElement()) {
    console.log('There is an element highlighted');
}

//获取屏幕上当前突出显示的元素
//它将是`/src/core/element.js的一个实例
const activeElement = driver.getHighlightedElement();

//获取最后一个突出显示的元素，该元素是`/src/core/element.js的实例`
const lastActiveElement = driver.getLastHighlightedElement();

activeElement.getCalculatedPosition(); //获取活动元素的屏幕坐标
activeElement.hidePopover();           //把府绸藏起来
activeElement.showPopover();           //显示弹出窗口
activeElement.getNode();  //获取此元素后面的DOM元素