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