【插件】页面引导库driver.js:

news2024/12/23 15:42:45

文章目录

        • 一、效果图:
        • 二、实现思路:
        • 三、实现代码:
            • 【1】Driver.js 的技术特性
            • 【2】安装依赖
            • 【3】代码实现
            • 【4】 配置相关参数


一、效果图:

在这里插入图片描述

二、实现思路:

【官网】https://driverjs.com/docs/installation
【npm】https://www.npmjs.com/package/driver.js
【案例】改造driver.js, 打造业务通用的新手引导插件
【案例】Vue3使用driver.js做引导页,圈定内容显示空白,3种解决方法
【案例】Vue项目基于driverjs实现新用户导航

三、实现代码:
【1】Driver.js 的技术特性
  1. 简单轻量:使用很简单,独立无依赖,只有 4kb 大小
  2. 高度可定制:具有丰富强大的 API,按需使用
  3. 交互体验好:支持动画过渡,体验流畅舒服
  4. 突出显示任何内容:支持突出显示页面上的任何 dom 元素
  5. 简单几步实现功能介绍:为我们 Web 应用创建很棒的功能介绍,体验优秀
  6. 对用户操作友好:可以通过键盘控制引导流程,在生成力应用上很实用
  7. 浏览器兼容性表现一致:支持几乎所有浏览器(包括著名的IE)
【2】安装依赖
#npm 安装
npm i driver.js --save
#yarn 安装
yarn add driver.js

#项目组件中引入依赖
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';
【3】代码实现

在项目中需要先实例化 driver 对象,然后调用 driver.defineSteps(array) 方法实现引导步骤。
在需要实现新用户引导的Vue文件中实例化driver对象,例如在项目的 main.vue 文件中,driver.js用法如下所示:

<template>
  <div class="dashboard-container">
    <component :is="currentRole" />
  </div>
</template>
<script>
import adminDashboard from './admin'
import Driver from 'driver.js' // 引入driver.js依赖
import 'driver.js/dist/driver.min.css' // 引入driver.js的样式文件

export default {
  name: 'Main',
  components: { adminDashboard },
  data() {
    return {
      currentRole: 'adminDashboard',
      driver: null
    }
  },
  mounted() {
    // 实例化driver对象
    this.driver = new Driver()
    // 弹框提示
    this.$confirm('是否进入新手导航?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(() => {
      // 调用新手引导方法
      this.onNavigation()
    }).catch(() => {})
  },
  methods: {
    onNavigation() {
      // 新手引导方法
      this.driver.defineSteps([
        {
          element: '#hamburger-container',
          popover: {
            title: '折叠按钮',
            description: '点击折叠左侧菜单导航',
            position: 'right',
            nextBtnText: '下一步',
            prevBtnText: '上一步',
            closeBtnText: '关闭'
          }
        },
        {
          element: '.panel-group',
          popover: {
            title: '数据统计',
            description: '统计每日最新数据',
            position: 'bottom',
            nextBtnText: '下一步',
            prevBtnText: '上一步',
            closeBtnText: '关闭'
          }
        },
        {
          element: '#home-line-chart',
          popover: {
            title: '数据统计',
            description: '统计每日最新数据',
            position: 'bottom',
            nextBtnText: '下一步',
            prevBtnText: '上一步',
            closeBtnText: '关闭'
          }
        },
        {
          element: '#transaction-table',
          popover: {
            title: '订单汇总',
            description: '汇总平台销售订单量',
            position: 'right',
            nextBtnText: '下一步',
            prevBtnText: '上一步',
            closeBtnText: '关闭',
            doneBtnText: '完成'
          }
        }
      ])
      // 必须调用 start() 方法才能生效
      this.driver.start()
    }
  }
}
</script>
【4】 配置相关参数

defineSteps() 方法的参数为数组类型,数组中元素就是要执行的引导步骤。step 选项包括

{
  element: '#item',  // 需要被高亮的元素选择器
  popover: {                    // 弹框内容,如果为空将不会显示弹窗
    className: 'popover-class', // 额外指定的当前步骤弹窗类名
    title: '弹框标题',             // 弹窗的标题
    description: '该步骤是用于xxx', // 弹窗的主体内容
    showButtons: false,         // 是否在弹窗底部显示控制按钮
    closeBtnText: '关闭',      // 关闭按钮的文本
    nextBtnText: '下一步',        // 当前步骤的下一步按钮文本
    prevBtnText: '上一步',    // 当前步骤的上一步按钮文本
    doneBtnText: '完成'    // 最后一步完成按钮文本
  }
}

diver对象配置参数说明

const driver = new Driver({
    className: 'scoped-class', //包裹driver.js弹窗的类名
    animate: true,  // 高亮元素改变时是否显示动画
    opacity: 0.75,  //背景透明度(0 表示只有弹窗并且没有遮罩)
    padding: 10,   // 元素与边缘的距离
    allowClose: true, // 是否允许点击遮罩时关闭
    overlayClickNext: false, //是否允许点击遮罩时移到到下一步
    doneBtnText: 'Done', // 最终按钮上的文本
    closeBtnText: 'Close', // 当前步骤关闭按钮上的文本
    nextBtnText: 'Next', //当前步骤下一步按钮上的文本
    prevBtnText: 'Previous', // 当前步骤上一步按钮上的文本
    showButtons: false, //是否在底部显示控制按钮
    keyboardControl: true, // 是否允许通告键盘控制(escape关闭,箭头键用于移动)
    scrollIntoViewOptions: {}, // `scrollIntoView()` 方法的选项
    onHighlightStarted: (Element) {}, // 元素开将要高亮时调用
    onHighlighted: (Element) {}, // 元素开完全高亮时调用
    onDeselected: (Element) {}, // 取消选择时调用
    onReset: (Element) {},        // 遮罩将要关闭时调用
    onNext: (Element) => {},      // 任何步骤中移到到下一步时调用
    onPrevious: (Element) => {},  // 任何步骤中移到到上一步时调用
});

driver对象提供一系列强大的API方法,开发者通过这些API方法对driver.js实现高度定制。driver对象API方法如下:

const isActivated = driver.isActivated; // 检查driver是否激活
driver.moveNext();     // 移动到步骤列表中的下一步
driver.movePrevious(); // 移动到步骤列表中的上一步
driver.start(stepNumber = 0);  // 从指定的步骤开始
driver.highlight(string|stepDefinition); // 高亮通过查询选择器指定的或步骤定义的元素
driver.reset(); // 重置遮罩并且清屏
driver.hasHighlightedElement(); //检查是否有高亮元素
driver.hasNextStep(); // 检查是否有可移动到的下一步元素
driver.hasPreviousStep(); // 检查是否有可移动到的上一步元素
driver.preventMove();// 阻止当前移动。如果要执行某些异步任务并手动移动到下一步,则在“onNext”或“onPrevious”中很有用
const activeElement = driver.getHighlightedElement();// 获取屏幕上当前高亮元素
const lastActiveElement = driver.getLastHighlightedElement();
activeElement.getCalculatedPosition(); // 获取活动元素的屏幕坐标
activeElement.hidePopover();  // 隐藏弹窗
activeElement.showPopover();  // 显示弹窗
activeElement.getNode();  // 获取此元素后面的DOM元素

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1038921.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

用Python在XML和Excel表格之间实现互转

XML是一种超文本标记语言和文件格式&#xff0c;具有可自定义标签&#xff0c;易于扩展&#xff0c;便于编辑&#xff0c;传输便捷等优点。XML已成为应用数据交换的常用方式。虽然XML格式易于传输和开发者操作&#xff0c;但对于普通用户来说&#xff0c;数据以xls或xlsx的形式…

二维穿墙雷达CW112 的 优势

TFN CW112加固型二维定位穿墙雷达是一款综合UWB雷达和生物医学工程技术研制而成的人体目标探测装备。该产品可穿透建筑墙体等障碍物&#xff0c;实时获取其后方人体目标位置及数量等信息&#xff0c;具有穿透性强、轻质便携、可双手操控等特点&#xff0c;广泛应用于反恐处突、…

vue+element项目创建步骤

一、创建vue项目步骤 要创建一个Vue Element UI的项目&#xff0c;你可以按照以下步骤进行操作&#xff1a; 1.确保你已经安装了Node.js和npm&#xff08;Node.js的包管理器&#xff09;。你可以在命令行中运行以下命令来检查它们是否已经安装&#xff1a; node -vnpm -v2.使…

视频超过1g怎么压缩?分享简单的视频压缩方法

随着科技的发展&#xff0c;视频已经成为了我们日常生活中不可或缺的一部分。然而&#xff0c;有时候我们会遇到视频文件过大&#xff0c;无法顺利传输或存储的问题。那么&#xff0c;如何解决视频超过1g压缩的问题呢&#xff1f; #长假读书清单# 首先我们可以借助专业的压缩…

华为云云耀云服务器L实例评测|运行python脚本

目录 一、往期回顾二、华为云云耀云服务器L实例使用流程1、账号注册2、购买并配置云耀云服务器L实例3、登录并使用云耀云服务器L实例 三、为什么Python越来越火&#xff1f;四、使用宝塔运行Python脚本1、下载Python项目管理器2、上传项目到服务器3、添加项目4、安装requests启…

一文读懂Llama 2(从原理到实战)

简介 Llama 2&#xff0c;是Meta AI正式发布的最新一代开源大模型。 Llama 2训练所用的token翻了一倍至2万亿&#xff0c;同时对于使用大模型最重要的上下文长度限制&#xff0c;Llama 2也翻了一倍。Llama 2包含了70亿、130亿和700亿参数的模型。Meta宣布将与微软Azure进行合…

便携式水质采样设备助力毒情监测

便携式水质采样设备助力毒情监测 污水涉毒采样检测工作是运用科技手段准确评估监测辖区内毒情形势的重要手段。期间&#xff0c;民警详细了解了生活和工业污水的处理、排放以及服务范围、人口数量等情况&#xff0c;并就污水涉毒采样检测工作达成共识。随后&#xff0c;民警严格…

【车载开发系列】ECU Application Software程序刷新步骤

【车载开发系列】ECU Application Software程序刷新步骤 ECU Application Software程序刷新步骤 【车载开发系列】ECU Application Software程序刷新步骤一. Boot Software&#xff08;引导软件&#xff09;1&#xff09;boot manager&#xff08;启动管理器&#xff09;2&…

Flink1.12.7 Standalone版本安装

官网下载版本&#xff1a;https://archive.apache.org/dist/flink/flink-1.12.7/flink-1.12.7-bin-scala_2.12.tgz 可以从首页找到Downloads | Apache Flink&#xff0c;一直往下拉 安装&#xff1a;下载后直接解压即可 添加全局参数&#xff1a; #vi /etc/profile FLINK_HO…

云服务器免费体检

三丰云提供了免费云服务器与免费虚拟主机服务&#xff0c; 个人学习、搭建个人网站或者微信小程序调试等可以申请一台。 免费申请网址为&#xff1a; https://www.sanfengyun.com/ 还是挺方便的&#xff0c;大家可以体验体验。

【校招VIP】前端操作系统之I/O调度算法

考点介绍 I/O 调度算法在各个进程竞争磁盘I/O的时候担当了裁判的角色。他要求请求的次序和时机做最优化的处理&#xff0c;以求得尽可能最好的整体I/O性能。 前端操作系统之I/O调度算法-相关题目及解析内容可点击文章末尾链接查看&#xff01; 一、考点题目 1. 某文件占10个…

Kafka的消息存储机制

前面咱们简单讲了K啊开发入门相关的概念、架构、特点以及安装启动。 今天咱们来说一下它的消息存储机制。 前言&#xff1a; Kafka通过将消息持久化到磁盘上的日志文件来实现高吞吐量的消息传递。 这种存储机制使得Kafka能够处理大量的消息&#xff0c;并保证消息的可靠性。 1…

西门子S7-1200使用LRCF通信库与安川机器人进行EthernetIP通信的具体方法示例

西门子S7-1200使用LRCF通信库与安川机器人进行EthernetIP通信的具体方法示例 准备条件: PLC:S7-1200 1214C DC/DC/DC 系统版本4.5及以上。 机器人控制柜:安川YRC1000。 软件:TIA V17 PLC做主站,机器人做从站。 具体方法可参考以下内容: 使用的库文件为西门子 1200系列…

[React] react-hooks如何使用

react-hooks思想和初衷&#xff0c;也是把组件&#xff0c;颗粒化&#xff0c;单元化&#xff0c;形成独立的渲染环境&#xff0c;减少渲染次数&#xff0c;优化性能。 文章目录 1.为什么要使用hooks2.如何使用hooks2.1 useState2.2 useEffect2.3 useLayoutEffect2.4 useRef2.5…

【前段基础入门之】=>HTML5 的新增特性!

这里写目录标题 HTML5简介HTML5 优势新增语义化标签新增布局标签新增状态标签meter 标签progress 标签 新增列表标签新增文本标签文本注音文本标记 新增表单功能表单控件新增属性input 新增属性值form 标签新增属性 新增多媒体标签视频播放标签音乐播放标签 新增全局属性&#…

ICCV 2023 | 噪声关联鲁棒的图匹配方法

©PaperWeekly 原创 作者 | 林义杰 单位 | 四川大学 研究方向 | 多模态、多视角学习 论文标题&#xff1a; Graph Matching with Bi-level Noisy Correspondence 论文地址&#xff1a; https://arxiv.org/pdf/2212.04085.pdf 开源代码&#xff1a; https://github.com/XLe…

word文档莫名其妙的丢失了怎么办?7个方案恢复

不知道你是否曾经遇到过相似的情况&#xff1a;花费了数小时甚至数天编辑的Word文档&#xff0c;却莫名其妙的丢失了。这时的心情可能非常复杂。如果你不知道该怎么办&#xff0c;以下是几种恢复方案&#xff0c;希望能对你有所帮助&#xff01; 关于Word文档 Word文档通常是由…

Vue路由与nodejs下载安装及环境变量的配置

目录 前言 一、Vue路由 1.路由简介 是什么 作用 应用场景 2.SPA简介 SPA是什么 SPA的优点 注意事项 3.路由实现思路 1.引入路由的js依赖 2.定义组件 3.定义组件与路径的对应关系 4.通过路由关系获取路由对象router 5.将路由对象挂载到实例中 6.触发路由事…

学生选课系统基础版

目录 一.Java 中的集合框架&#xff08;上&#xff09; 1.Java中的集合框架概述 2.Collection接口&接口简介 3.学生选课——创建学生类和课程类 4.学生选课——添加课程Ⅰ 5.学生选课——添加课程Ⅱ 6.学生选课——课程查询 7.学生选课——课程修改 8.学生选课——课程删…