vue项目通过driver.js实现操作步骤指引
许彦
一、npm安装
npm install driver.js
二、在main.js引入
import Driver from 'driver.js'
Vue.prototype.driver = new Driver({
className: 'scoped-class', // 包装类名
animate: true, // 动画
opacity: 0.75, // 遮罩层不透明度（0表示仅弹出且不覆盖）
padding: 10, // 边距
allowClose: true, // 点击遮罩层是否关闭
overlayClickNext: false, // Should it move to next step on overlay click
doneBtnText: '完成', // 最后一个按钮上的文本
closeBtnText: '关闭', // “关闭”按钮上的文本
nextBtnText: '下一步', // “下一步”按钮上的文本
prevBtnText: '上一步', // “上一步”按钮上的文本
showButtons: false, // 不显示控制按钮（弹窗底部）
keyboardControl: true, // 允许通过键盘进行控制（esc以关闭，箭头键移动）
scrollIntoViewOptions: {}, // We use `scrollIntoView()` when possible, pass here the options for it if you want any
onHighlightStarted: (Element) {}, // 在元素即将突出显示时调用
onHighlighted: (Element) {}, // 当元素完全突出显示时调用
onDeselected: (Element) {}, // 取消选择元素时调用
onReset: (Element) {}, // 覆盖即将清除时调用
onNext: (Element) => {}, // 在任何步骤转到下一步时调用
onPrevious: (Element) => {}, // 在任何步骤转到上一步时调用
})
三、引入步骤节点js文件
export const steps = [
{
element: '#test1',
popover: {
title: '新增',
description: '第一步：单个储备项目录入',
position: 'bottom'
}
},
{
element: '#test2',
popover: {
title: '批量导入',
description: '第一步：储备项目批量录入',
position: 'bottom'
},
},
{
element: '#test3',
popover: {
className: 'test3',
title: '批量导入',
description: `<div class="test3_div"></div>
<div>第二步：可直接上传批量导入的储备项目文件（若未下载模板，则先选择项目类型，下载模板，填写信息保存后，进行文件上传。）</div>`,
position: 'bottom'
}
},
{
element: '#test4',
popover: {
title: '导出',
description: '选择需要导出的项目',
position: 'top'
}
},
{
element: '#test5',
popover: {
title: '导出',
description: '第三步：点击需要导出的项目，点击导出按钮(多个项目导出，需要点选同类项目)',
position: 'bottom'
},
},
{
element: '#test6',
popover: {
title: '全部导出',
description: '第三步：点击全部导出',
position: 'bottom'
},
},
{
element: '#test7',
popover: {
className: 'test7',
title: '全部导出',
description: '<div class="test7_div"></div>',
position: 'bottom'
},
onNext: () => {}
},
{
element: '.sidebar-container',
popover: {
className: 'test8_div',
title: '总投资计划',
description: '第四步：进入计划管理-总投资计划模块，下载模板，填写完整后，储备项目将转为完成立项。',
position: 'right-center'
}
}
]
steps扩展
const steps = {
element : '#some-item' , // 查询要突出显示的选择器字符串或节点
stageBackground : '#ffffff' , // 这将覆盖驱动程序中设置的
popover : { // 不会有 popover如果为空或未给定
className : 'popover-class' , // 除了驱动程序选项中的一般 className 之外，还要包装此特定步骤 popover 的 className
title : 'Title' , // 弹出框上的标题
description : 'Description' , // 弹出框的主体
showButtons : false , // 不要在页脚中显示控制按钮
doneBtnText : 'Done' , // 最后一个按钮上的文本
closeBtnText : 'Close' , // 关闭按钮上的文本
nextBtnText : 'Next' , // 下一个按钮文本
prevBtnText : 'Previous' , // 上一个按钮文本
} ,
onNext : ( ) => { } , // 从当前步骤移动到下一步时调用
onPrevious :( ) => { } , // 从当前步骤移动到上一步时调用
} ;
四、通过方法调用
<el-button
class="globalOperational"
icon="el-icon-position"
size="mini"
@click.prevent.stop="handleOperational"
>操作指引
</el-button>
import {steps} from './steps'
methods: {
handleOperational() {
this.$nextTick(() => {
this.driver.defineSteps(steps)
this.driver.start()
})
}
}
必须要写成click.prevent.stop形式否则事件触发不了
五、在需要触发的元素上绑定唯一ID
<el-col :span="1.5" id="test1"></el-col>
六、扩展：API
const driver = new Driver(steps);
const isActivated = driver.isActivated; //检查驱动程序是否处于活动状态
driver.defineSteps([ stepDefinition1, stepDefinition2, stepDefinition3 ]); // 步骤列表
driver.start(stepNumber = 0); // 开始执行定义的步骤，stepNumber步骤索引
driver.moveNext(); // 转到步骤列表defineSteps中的下一步
driver.movePrevious(); // 转到步骤列表中的上一步
driver.hasNextStep(); // 检查是否有下一步
driver.hasPreviousStep(); // 检查是否有上一步
// 阻止当前移动。如果要执行某些异步任务并手动移到下一步，则在“onNext”或“onPrevious”中很有用
driver.preventMove();
driver.highlight(string|stepDefinition); // 使用查询选择器或步骤定义突出显示元素
driver.refresh(); // 重新定位弹出窗口和突出显示的元素
driver.reset(); // 重置覆盖并清除屏幕
//当你想在一个驱动程序运行时运行另一个驱动程序实例时，可以传递一个布尔参数来立即清除，而不执行动画等操作
driver.reset(clearImmediately = false);
driver.hasHighlightedElement(); // 检查是否有突出显示的元素
const activeElement = driver.getHighlightedElement(); // 获取屏幕上当前突出显示的元素
const lastActiveElement = driver.getLastHighlightedElement(); // 获取最后一个突出显示的元素
activeElement.getCalculatedPosition(); // 获取活动元素的屏幕坐标
activeElement.hidePopover(); // 隐藏弹窗
activeElement.showPopover(); // 显示弹窗
activeElement.getNode(); // 获取此元素后面的DOM元素
七、样式修改
需要在style添加新的模块样式然后在index.js文件导入
@import './step.scss';
step.scss
/** 操作指引浮框样式 start */
#driver-popover-item {
max-width: 1000px !important;
background: url("~@/assets/images/highVoltageProcessControl/userListBg.png") no-repeat !important;
background-size: 100% 100% !important;
.driver-popover-title {
color: #FFFFFF !important;
}
.driver-popover-description {
color: #FFFFFF !important;
}
.driver-clearfix.driver-popover-footer {
.driver-close-btn, .driver-prev-btn, .driver-prev-btn.driver-disabled, .driver-next-btn {
background-color: #004880 !important;
color: #FFFFFF;
border-color: #169BD5;
text-shadow: 0 0 0 transparent;
}
}
}
.test3 {
width: 600px !important;
height: 420px !important;
.driver-clearfix.driver-popover-footer {
position: absolute !important;
bottom: 22px !important;
width: 90% !important;
}
.test3_div {
width: 100%;
height: 280px;
background: url("~@/assets/images/operationalGuideline/operational2.png") no-repeat;
background-size: 100% 100%;
}
}
.test7 {
width: 600px !important;
height: 420px !important;
.driver-clearfix.driver-popover-footer {
position: absolute !important;
bottom: 24px !important;
width: 90% !important;
}
.test7_div {
width: 100%;
height: 280px;
background: url("~@/assets/images/operationalGuideline/operational7.png") no-repeat;
background-size: 100% 100%;
}
}
.test8_div {
top: 23% !important;
}
/** 操作指引浮框样式 end */
类似资料：