当前位置: 首页 > 工具软件 > Driver.js > 使用案例 >

vue使用driver.js做页面分页引导

任繁
2023-12-01

参考在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()
    })
},
 类似资料: