一：使用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了
