参考:在vue项目中 使用driver.js来进行页面分步引导_csl125的博客-CSDN博客
注:1、element: "#guide-menu",是元素id,也可以写成类element: ".guide-menu"
2、guide ()方法是需要调用的,可放在mounted中
//guide.js
const steps = [
{
element: "#guide-menu",
popover: {
title: "菜单导航",
description: "点击菜单可切换右侧菜单内容",
position: "right"
}
},
补充: mounted() { this.$nextTick(function () { this.driver = new Driver({ doneBtnText: "完成", //结束按钮的文字 stageBackground: "#ffffff", 突出显示元素的背景颜色 nextBtnText: "下一步", //下一步按钮的文字 prevBtnText: "上一步", //上一步按钮的文字 closeBtnText: "关闭" //关闭按钮的文字 onHighlightStarted:(Element)=> {},//元素即将突出显示时调用 onHighlighted:(Element)=> {},//元素完全突出显示时调用 onDeselected:(Element)=> {},//取消选择元素时调用 onReset:(Element)=> {},//当要清除叠加时调用 onNext:(Element)=> {},//在任何步骤中移动到下一步时调用 onPrevious :( Element)=> {},//在任何步骤中移动到上一步时调用 }); this.driver.defineSteps(steps); this.driver.start() }) },