Vue 页面引导效果 driver.js
引导页效果
Driver.js -Demo 是一个指南性质的库
访问GitHub
Driver 的使用
1、安装依赖包
npm install driver.js
或
yarn add driver.js
2、main.js 引入并将方法挂载到 vue 原型上
// 导入文件
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';
// 将方法写入到 Vue 原型上
Vue.prototype.$driver = new Driver({
doneBtnText: '完成', // 最后一个按钮的文本
closeBtnText: '关闭', // 关闭按钮文本
stageBackground: '#f60', // 高亮显示的元素的背景色
nextBtnText: '下一步', // 下一步
prevBtnText: '上一步', // 上一步
})
3、在需要引导的页面中定义引导函数
// 引导规则较多建议以单文件引入
this.$nextTick(() => {
const driverStep = [
{
element: "#step01",
popover: {
title: "用户信息",
description: "描述信息",
position: "top"
}
}
]
this.$driver.defineSteps(driverStep);
this.$driver.start(); // 启动
})
API 实例参数
const driver = new Driver({
// 设置提示框的 className, 默认 ''
className: 'scoped-class',
// 是否设置动画, 默认 true
animate: true,
// 背景不透明度(0表示只有弹出框,没有覆盖)
opacity: 0.75,
// 元素与边缘周围的距离
padding: 10,
// 点击遮罩层是否关闭, 默认 true
allowClose: true,
// 点击遮罩层进行下一步提示
overlayClickNext: false,
doneBtnText: '结束',
closeBtnText: '关闭',
// 高亮显示的元素的背景色
stageBackground: '#ffffff',
nextBtnText: '下一步',
prevBtnText: '上一步',
// 是否显示控制按钮,默认为 true [ ture显示/false隐藏 ]
showButtons: false,
// 允许通过键盘进行控制(ESC退出关闭,左右箭头键移动)
keyboardControl: true,
scrollIntoViewOptions: {},
// 当元素即将高亮显示时调用
onHighlightStarted: (Element) => {},
// 当元素完全高亮显示时调用
onHighlighted: (Element) => {},
// 取消选择元素时调用
onDeselected: (Element) => {},
// 将要清除覆盖时调用
onReset: (Element) => {},
// 移动到下一步骤时调用
onNext: (Element) => {},
// 移动到上一步骤时调用
onPrevious: (Element) => {},
});
步骤定义 API
步骤配置主要用在 defineSteps
和 highlight
方法上
// 配置说明
const stepDefinition = {
// 高亮元素
element: '#some-item',
// 高亮显示的元素的背景色
stageBackground: '#ffffff',
popover: {
className: 'popover-class',
title: '弹窗标题',
description: '步骤描述内容',
// 是否显示控制按钮,默认为 true [ ture显示/false隐藏 ]
showButtons: false,
doneBtnText: '结束',
closeBtnText: '关闭',
nextBtnText: '下一步',
prevBtnText: '上一步',
/**弹窗显示的位置
* left, left-center, left-bottom,
* top, top-center, top-right,
* right, right-center, right-bottom,
* bottom, bottom-center, bottom-right,
* mid-center
*/
position: 'left',
},
// 从当前步骤移动到下一步时调用
onNext: () => {},
// 从当前步骤移动到上一步时调用
onPrevious: () => {},
};
// 设置单个元素
driver.highlight(stepDefinition)
// 设置分步指南
driver.defineSteps([
stepDefinition1,
stepDefinition2,
stepDefinition3
])
可用方法 API
const driver = new Driver(driverOptions);
// 判断当前是否处于激活状态
if (driver.isActivated) {
console.log('Driver is active');
}
// 在步骤指南中,您可以调用以下方法
// 设置分布指南
driver.defineSteps([ stepDefinition1, stepDefinition2, stepDefinition3 ]);
// 开始执行步骤指南
driver.start(stepNumber = 0);
// 移动到下一步
driver.moveNext();
// 移动到上一步
driver.movePrevious();
// 检查是否有下一步要执行
driver.hasNextStep();
// 检查是否有上一步要执行
driver.hasPreviousStep();
// 阻止当前移动。如果需要,可在“onNext”或“onPrevious”中使用
// 执行一些异步任务并手动移动到下一步
driver.preventMove();
// 定义高亮元素
driver.highlight(string|stepDefinition);
// 刷新
driver.refresh();
// 重置覆盖并清除屏幕
driver.reset();
// 检查是否有任何高亮显示的元素
if(driver.hasHighlightedElement()) {
console.log('There is an element highlighted');
}
// 获取当前高亮显示的元素
const activeElement = driver.getHighlightedElement();
// 获取最后一个高亮显示的元素
const lastActiveElement = driver.getLastHighlightedElement();
// 获取当前高亮元素的屏幕坐标
activeElement.getCalculatedPosition();
activeElement.hidePopover();
activeElement.showPopover();
// 获取此元素后面的DOM元素
activeElement.getNode();
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· 深度对比:PostgreSQL 和 SQL Server 在统计信息维护中的关键差异