先上图
该库可一步一步引导用户去怎么操作
使用非常简单
yarn add driver.js -D
在main.ts引入，实例化
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css
export const driver = new Driver({
className: 'scoped-class',
opacity: 0.1,
padding: 10,
animate: false,
allowClose: false,
keyboardControl: false,
closeBtnText: '关闭',
doneBtnText: '结束',
nextBtnText: '下一步',
prevBtnText: '上一步'
})
参数说明：
className:“scoped class”，// 为你的指示模块添加类名 如果你要取消 某一个按钮（比如：“上一步””下一步“，”完成“）的 这个类名还是要加上的
animate:true，//在更改突出显示的元素时设置动画
不透明度：0.75，//背景不透明度（0表示只有弹出窗口，没有覆盖）
padding:10，//元素与边缘的距离
allowclose:true，//单击覆盖是否应关闭
overlay click next:false，//单击overlay click是否转到下一步
donebtntext:“完成”，//最后一个按钮上的文本
closebtnext:'关闭'，//此步骤的“关闭”按钮上的文本
NextBtnText:'一步'，//此步骤的下一步按钮文本
prevbtnext:“上一步”，//此步骤的上一个按钮文本
show buttons:false，//不在页脚中显示控件按钮
keyboardcontrol:true，//允许通过键盘进行控制（转义为“关闭”，箭头键为“移动”）。
scrollintoview options:，//我们尽可能使用'scrollintoview（）'，如果需要，请在此处传递它的选项
onHighlightStarted:（element），//当要突出显示元素时调用
onHighlighted:（element），//当element完全突出显示时调用
OnDeselected:（element），//取消选择element后调用
onreset：（element），//当要清除覆盖时调用
on next:（element）=>，//在任何步骤上移动到下一步时调用
onPrevious:（element）=>，//在任何步骤上移动到下一步时调用
特别注意的是animate:false，true的话modal弹窗做引导会异常
页面使用
import { driver } from '@/main'
import tipConfig from './tipConfig'
//调用方法
const newpPeopleTip = () => {
setTimeout(function () {
// driver 定义步骤
driver.defineSteps(tipConfig.stepListArr)
driver.start()
}, 10)
}
tipConfig页面步骤配置文件
export default {
stepListArr: [
// 步骤1
{
element: '#first_tip',
popover: {
title: '查询',
description: '查询区域'
}
},
{
element: '#second_tip',
popover: {
title: '列表',
description: '列表区域'
}
}
],
stepModalArr: [
// 步骤1
{
element: '#first_modal_tip',
popover: {
title: '第一步',
description: '首先选择销售单号(未找到单号，进行刷新)，自动带出数据'
}
},
{
element: '#second_modal_tip',
popover: {
title: '第二步',
description: '新增，选择圈号，录入卸车入圈明细'
}
},
{
element: '#three_modal_tip',
popover: {
title: '第三步',
description: '选择磅秤，读取明细称重重量'
}
},
{
element: '#four_modal_tip',
popover: {
title: '第四步',
description: '点击保存',
position: 'top-right'
}
}
]
}
配置步骤参数说明：
element ： '＃some-item '， //查询选择器字符串或要突出显示的节点
stageBackground ： '＃ fffffff '， //这将覆盖驱动程序
popover中设置的一个： { //如果为空则不会有弹出窗口给定
className ： ' popover-class '，// className以包装此特定步骤popover以及Driver选项
标题中的常规className ： ' Title '， // popover
描述中的标题： '描述'， //
popover的主体
showButtons： false， //不显示页脚中的控制按钮 doneBtnText： ' Done '， //最后一个按钮上的文本
closeBtnText： ' Close '， //关闭按钮上的文字
nextBtnText： '下一步'， //下一个按钮文字
prevBtnText ： '上一页'， //上一页按钮文字
onNext : (）=> {}， //从当前步骤
转到下一步时调用onPrevious : (）=> {}， //从当前步骤移动到上一步时调用
搞定，有想法的家人可以试试，让你的项目更加人性化
