driver.js 扩展下次“不再提示”功能

文档地址:https://github.com/kamranahmedse/driver.js
官方demo:https://kamranahmed.info/driver.js/

/*** @Title: 页面引导 ……* @Author: JackieZheng* @Date: 2023-08-16 10:43:31* @LastEditTime: 2023-08-16 10:55:08* @LastEditors:* @Description:* @FilePath:utils\\driver.js*/
import { driver } from 'driver.js'
import 'driver.js/dist/driver.css'
import { ElMessage, ElMessageBox } from 'element-plus'
import store from '../store'const driverObj = driver({popoverClass: 'driverjs-theme',showProgress: true,opacity: 0.1,animate: true,allowClose: true, // 是否允许点击遮罩时关闭doneBtnText: '我知道了',closeBtnText: '跳过', //  关闭按钮文案nextBtnText: '下一步', // 下一步的按钮文案prevBtnText: '上一步', // 上一步的按钮文案keyboardControl: true, // 允许通过键盘控制(退出关闭,箭头键移动)progressText: '{{current}} / {{total}}',guidName:'',/***@description: 准备开始退出事件*@author: JackieZheng*@date: 2023-08-16 12:47:38*/onDestroyStarted: () => {// doSomethingdriverObj.destroy() // 自理完后,必须要重新执行退出},/***@description: 点击关按钮或外部关闭*@author: JackieZheng*@date: 2023-08-16 12:47:14*/onCloseClick: () => {// doSomethingdriverObj.destroy() // 处理完后,必须要重新执行退出},/***@description: 彻底退出事件*@author: JackieZheng*@date: 2023-08-16 12:47:38*/onDestroyed: () => {// doSomethingdriverObj.destroy() // 处理完后,必须要重新执行退出},/***@description: 设置某个页面显示引导*@author: JackieZheng*@para: guidName 当前页面 参数*@date: 2023-08-16 14:05:31*/ShowGuidesSet: (guidName) => {const guides = store.state.driverGuidesguides[guidName] = truestore.commit('CacheDriverGuides', guides)},/***@description: 不再展示某个页面的引导*@author: JackieZheng*@date: 2023-08-16 14:05:06
*/HideNextTime: (guidName) => {const guides = store.state.driverGuidesguides[guidName] = falsestore.commit('CacheDriverGuides', guides)},/***@description: 最后一步 改下次是否提示*@author: JackieZheng*@date: 2023-10-04 13:20:07*/onHighlighted : () => {if (!driverObj.hasNextStep()) {let preBtn = document.querySelector('.driver-popover-prev-btn')let btn = document.createElement('button')btn.textContent = '不再提示'btn.style.cssText ='background-color: #ff9800;border: 2px solid #ff9800;'btn.addEventListener('click', ()=> {driverObj.getConfig().HideNextTime(driverObj.getConfig().guidName)driverObj.destroy()})let btnBox = preBtn.parentNodebtnBox.insertBefore(btn, preBtn)btnBox.removeChild(preBtn)}},/***@description: 检测是否 不再提示*@author: JackieZheng*@date: 2023-10-04 13:32:50*/enableShow:()=>{return store.state.driverGuides[driverObj.getConfig().guidName] !== false}})export default driverObj

使用

<script setup name="lbooks">import driverObj from '../utils/driver'/* 设置引导 提示步骤及内容 */const driverSteps = [{element: '.obj_install',popover: {title: '提示',showButtons: false,description:'本面有些内容需要喝杯水能正常显示'}}]/* 启动driver */onMounted(() => {driverObj.getConfig().showProgress = falsedriverObj.getConfig().guidName = 'Ebk'driverObj.getConfig().ShowGuidesSet('Ebk') // 调试时 强制启用引导if (driverObj.getConfig().enableShow()) {driverObj.setSteps(driverSteps)driverObj.drive()}})
</script>

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

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

相关文章

【9】c++设计模式——>开放封闭原则

开放-封闭原则说的是软件实体&#xff08;类&#xff0c;模块&#xff0c;函数等&#xff09;可以扩展&#xff0c;但是不可以修改&#xff0c;也就是说对于扩展是开放的&#xff0c;修改是封闭的。 该原则是程序设计的一种理想模式&#xff0c;在很多情况下无法做到完全的封闭…

Nginx限流熔断

一、Nginx限流熔断 Nginx 是一款流行的反向代理和负载均衡服务器&#xff0c;也可以用于实现服务熔断和限流。通过使用 Nginx 的限流和熔断模块&#xff0c;比如&#xff1a;ngx_http_limit_req_module 和 ngx_http_limit_conn_module&#xff0c;可以在代理层面对服务进行限流…

【JavaEE】synchronized 原理

文章目录 前言synchronized 的加锁过程1.无锁 -> 偏向锁2. 偏向锁 -> 轻量级锁3. 轻量级锁 -> 重量级锁 锁的优化操作1. 锁消除2. 锁粗化 相关面试题 前言 前面我们学习了关于JavaEE多线程方面的锁策略以及 synchronized 分别对应哪些锁策略&#xff0c;并且我们还了…

JMeter性能测试

性能测试前言 老师开局一句话&#xff1a;性能测试和你会不会JMeter一点关系没有…… 作者坚持技多不压身的原则&#xff0c;还是多学一点JMeter吧&#xff0c;看老师到底要怎么讲下去&#xff0c;什么并发量、吞吐量啥的…… 性能测试的核心思想&#xff1a;在于创造大量并发去…

消息队列-RabbitMQ(二)

接上文《消息队列-RabbitMQ&#xff08;一&#xff09;》 Configuration public class RabbitMqConfig {// 消息的消费方json数据的反序列化Beanpublic RabbitListenerContainerFactory<?> rabbitListenerContainerFactory(ConnectionFactory connectionFactory){Simple…

Open Cascade旋转变换平行线

在本人开发的弯管自动CAM软件中&#xff0c;有一个问题一直没有解决&#xff0c;就是180度平行管路需要做角度微调&#xff0c;以便进行YBC预览。研究了一番后&#xff0c;搞定了这个问题&#xff0c;关键在于采用OCC库实现拓扑变换。 本文将介绍如何使用OpenCASCADE库来实现平…

3.物联网射频识别,(高频)RFID应用ISO14443-2协议,(校园卡)Mifare S50卡

问题&#xff1a; 1) 14443协议&#xff0c;RFID标签的默认通信速率是 106kbps&#xff0c;也可以通过协商&#xff0c;调整为 &#xff08;fc/6413.56M/64&#xff09;212、424、 848kbps。 2) 14443-3 A类卡&#xff0c;上电后&#xff0c;读写器发送REQA命令&#xff0c;标签…

激光雷达中实现F-P标准具高热稳定性的帕尔贴精密温控解决方案

摘要&#xff1a;法布里-珀罗标准具作为一种具有高温度敏感性的精密干涉分光器件&#xff0c;在具体应用中对热稳定性具有很高的要求&#xff0c;如温度波动不能超过0.01℃&#xff0c;为此本文提出了相应的高精度恒温控制解决方案。解决方案具体针对温度控制精度和温度均匀性控…

利用LVM制作swap交换分区

首先把一个磁盘进行分区制作成物理卷&#xff0c;也可以直接将一整块磁盘做成物理卷,我这里使用的是磁盘分区&#xff1a;pvcreate /dev/sdb1 然后将这个物理卷制作成卷组&#xff1a;vgcreate vg1 /dev/sdb1; 将这个卷组制作成逻辑卷&#xff1a;lvcreate -L 900M -n lv1 vg…

计算机竞赛 题目: 基于深度学习的疲劳驾驶检测 深度学习

文章目录 0 前言1 课题背景2 实现目标3 当前市面上疲劳驾驶检测的方法4 相关数据集5 基于头部姿态的驾驶疲劳检测5.1 如何确定疲劳状态5.2 算法步骤5.3 打瞌睡判断 6 基于CNN与SVM的疲劳检测方法6.1 网络结构6.2 疲劳图像分类训练6.3 训练结果 7 最后 0 前言 &#x1f525; 优…

angularjs开发环境搭建

Angularjs是一个前端页面应用开发框架&#xff0c;其使用TypeScript作为开发语言&#xff0c;Angularjs的特性包括&#xff0c;使用组件、模板以及依赖注入的开发框架构建可扩展的web应用&#xff0c;使用易于集成的类库支持页面路由、页面表单、前后端接口交互等各种不同特性&…

JVM:经典垃圾收集器

经典垃圾收集器 如果说收集算法是内存回收的方法论&#xff0c;那垃圾收集器就是内存回收的实践者 《Java虚拟机规范》中对垃圾收集器应该如何实现并没有做出任何规定&#xff0c;因此不同的厂商、不同版本的虚拟机所包含的垃圾收集器都可能会有很大差别&#xff0c;不同的虚拟…

【Java】微服务——Nacos注册中心

目录 1.Nacos快速入门1.1.服务注册到nacos1&#xff09;引入依赖2&#xff09;配置nacos地址3&#xff09;重启 2.服务分级存储模型2.1.给user-service配置集群2.2.同集群优先的负载均衡 3.权重配置4.环境隔离4.1.创建namespace4.2.给微服务配置namespace 5.Nacos与Eureka的区别…

Day 04 python学习笔记

Python数据容器 元组 元组的声明 变量名称&#xff08;元素1&#xff0c;元素2&#xff0c;元素3&#xff0c;元素4…….&#xff09; &#xff08;元素类型可以不同&#xff09; eg: tuple_01 ("hello", 1, 2,-20,[11,22,33]) print(type(tuple_01))结果&#x…

安装python中tensorflow和keras==2.2.0的路程

1.python中安装Keras2.3.0 你可以使用pip来安装特定版本的Keras。在命令行中运行以下命令&#xff1a; pip install keras2.3.0这将会下载并安装Keras的2.3.0版本及其相应的依赖项。请确保你的Python环境已经配置好&#xff0c;并且有足够的权限来安装软件包。2.python 中安装…

python中类的内置函数有哪些

在 Python 中&#xff0c;类的内置函数&#xff08;也称为魔术方法或特殊方法&#xff09;以双下划线开头和结尾&#xff0c;用于自定义类的行为。以下是一些常见的内置函数及其作用&#xff1a; __init__(self, ...): 构造函数&#xff0c;用于初始化对象。创建一个类的实例时…

javascript二维数组(3):指定数组元素的特定属性进行搜索

js中对数组&#xff0c; var data [{“name”: “《西游记》”, “author”: “吴承恩”, “cat”: “A级书刊”, “num”: 3},{“name”: “《三国演义》”, “author”: “罗贯中”, “cat”: “A级书刊”, “num”: 8},{“name”: “《红楼梦》”, “author”: “曹雪芹”,…

uniapp实现微信小程序隐私协议组件封装

uniapp实现微信小程序隐私协议组件封装。 <template><view class"diygw-modal basic" v-if"showPrivacy" :class"showPrivacy?show:" style"z-index: 1000000"><view class"diygw-dialog diygw-dialog-modal bas…

求各区域热门商品Top3 - HiveSQL

背景&#xff1a;这是尚硅谷SparkSQL练习题&#xff0c;本文用HiveSQL进行了实现。 数据集&#xff1a;用户点击表&#xff0c;商品表&#xff0c;城市表 题目: ① 求每个地区点击量前三的商品&#xff1b; ② 在①的基础上&#xff0c;求出每个地区点击量前三的商品后&a…

MySQL-MVCC(Multi-Version Concurrency Control)

MySQL-MVCC&#xff08;Multi-Version Concurrency Control&#xff09; MVCC&#xff08;多版本并发控制&#xff09;&#xff1a;为了解决数据库并发读写和数据一致性的问题&#xff0c;是一种思想&#xff0c;可以有多种实现方式。 核心思想&#xff1a;写入时创建行的新版…