vue中页面分页引导

一：使用driver.js做页面分页引导

default: 先来看看默认引导的效果

可以根据自己的需求做页面样式上的修改

change: 修改修改如下：

移动端web端都可以用

接下来说一下具体的用法：

======================================================

1、npm 安装： npm install driver.js

如果项目中只有单个页面引导，只需要在单个页面中做配置就行

如果有多个页面需要做引导，直接在mian.js 里面配置即可

import Driver from "driver.js"

import "driver.js/dist/driver.min.css"

2、直接封装一下：new Driver({})

Vue.prototype.$Driver = new Driver({

    classname:"scoped class",// 为你的指示模块添加类名 如果你要取消 某一个按钮（比如：“上一步””下一步“，”完成“）的 这个类名还是要加上的

    animate:true, //在更改突出显示的元素时设置动画

    opacity: 0.65,//背景不透明度（0表示只有弹出窗口，没有覆盖）

    padding:10,//元素与边缘的距离

    allowClose:true,//单击覆盖是否应关闭

    overlayClickNext:false,//单击overlay click是否转到下一步

    doneBtnText:'完成',//最后一个按钮上的文本

    closeBtnText:'关闭', //此步骤的关闭”按钮上的文本

    nextBtnText:'下一步',//此步骤的下一步按钮文本

    prevBtnText:'上一步',//此步骤的上一个按钮文本

    showButtons:false,//不在页脚中显示控件按钮

    onReset: (data) => {}, // 引导结束触发

    onNext: (data) => {},// 引导进入下一步触发

})

 

3、然后需要配置一下具体的步骤steps，在需要引导页面的mounted中执行

4、其中driverStep就是配置的引导步骤，根据自己需求自定义配置，页面中引入下面配置就行 import driverStep from "./driverStep";
driverStepe内容如下

/**
 * 引导元素信息配置
 * 上一步下一步按钮文字都可以配置
 */
export default [
  {
    element: '#EHRCode',  //设置需要引导的元素id
    popover: {
      title: ' ',
      description: '描述信息',
      position: 'top',
      className: 'ehrcodestyle', //自定义样式
      nextBtnText: '(1/2)已知晓，下一个' //这里也可以自定义下一步按钮上的文字哦
    }
  },
  {
    element: '#SpareEmail',
    popover: {
      title: ' ',
      description: '描述信息',
      position: 'top',
      className: 'spareemailstyle',
      doneBtnText: '(2/2)我知道了'
    }
  }
];

这样就可以，样式根据自己的需求去动态修改即可

5、上面的id就是你需要去做引导的元素的id：如下

6、如果只需要提示一次，下一次进来不需要再提示了，可以把状态存储到cookie中

步骤一：首先你需要在当前引导页完的时候存储cookie，如果单页，在自己页面的onReset方法执行完之后存储cookie即可，多个页面引导的话 就是在main.js中的onReset方法中去检测当前页的引导完成了之后存储cookie，通过id检测来判断 data.getNode().id === '引导的id'

步骤二：存储完cookie之后，在当前引导页mounted中从cookie中获取数据，来判定是否需要再次弹出引导动画

7、案例：main.js中配置如下

Vue.prototype.$driver = new Driver({
  classname: "scoped-class",
  animate: true,
  opacity: 0.65,
  padding: 10,
  allowClose: false,
  overlayClickNext: false,
  showButtons: true,
  doneBtnText: '', // Text on the final button
  closeBtnText: '', // Text on the close button for this step
  stageBackground: 'transparent', // Background color for the staged behind highlighted element
  nextBtnText: '自定义', // Next button text for this step
  prevBtnText: '', // Previous button text for this step
  onReset: (data) => { // 引导结束触发
    // 这段代码目的是引导完成之后回到页面顶部
    let top = document.documentElement.scrollTop || document.body.scrollTop;
    let timer = setInterval(() => {
      let ispeed = Math.floor(-top / 5)
      top = document.documentElement.scrollTop = document.body.scrollTop = top + ispeed
      if (top === 0) {
        clearInterval(timer)
      }
    }, 20);

    //引导页完成
    if (data.getNode().id === 'SpareEmail') {
       //存储id为SpareEmail的cookie
    } else if (data.getNode().id === 'CardNumber') {
      //存储id为CardNumber的cookie
    }
  },
  onNext: (data) => { // 引导进入下一步触发
   
  },
})

mounted中获取cookie做判定即可

mounted() {
    this.$nextTick(() => {
      let driver = getCookie("CardNumber"); //获取存储的cookie
      if (!driver) {//获取不到，不存在则进行页面引导
        this.$driver.defineSteps(driverStep);
        this.$driver.start();
      }
    });
  },

OK了

 

交流

1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解  群号:   856402057

2、公众号：公众号「进军全栈攻城狮」 ，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！