当前位置: 首页 > news >正文

(HP)新手引导使用react-shepherd

1,官方参数文档:https://shepherdjs.dev/docs/tutorial-02-usage.html

2,基本代码

import { ShepherdTour } from 'react-shepherd';
import './index.less';  // 自己的样式文件,用来修改样式
import './shepherd.less'; // 将shepherd原来的样式文件拷进来import newSteps from './steps';const tourOptions = {defaultStepOptions: {cancelIcon: {enabled: false,// 取消按钮},},useModalOverlay: true,scrollTo: {behavior: 'smooth',block: 'center',},};<ShepherdTour steps={newSteps} tourOptions={tourOptions}><div className="first-step"></div><div className="second-step"></div></ShepherdTour>

step.js配置文件 

export default [{id: 'welcome', //无意义text: '第一步骤',attachTo: { element: '.first-step', on: 'bottom' }, // 目标高亮元素的classnameclasses: 'shepherd-welcome', // 引导元素的classarrow: true, buttons: [{type: 'next',text: '下一步',classes: 'shepherd-button-secondary', // 按钮的class},],},{id: 'end',text: '这里是声望等级对应着的等级权益,提升等级可以解锁更多权益',// text: [‘’,‘’], // 内容可以是数组// title: 'Installation', // 可以有标题attachTo: { element: '.third-step', on: 'top' },scrollTo: true,classes: 'shepherd-go',modalOverlayOpeningPadding:50, // 高光区域扩展的像素值modalOverlayOpeningRadius:50,  // 高光区域圆角buttons: [{type: 'next',text: '完成',},],beforeShowPromise: function () {return new Promise(function (resolve) {//  在该引导元素加载之前执行一些事件resolve();});},scrollToHandler: () => {// 覆盖滚动行为的函数const targetEle = document.getElementsByClassName('third-step')[0];const height = targetEle.offsetTop;document.getElementById('famous').scrollTo(0, height + 100);},when: { show: function() {// 当加载之前,和beforeShowPromise}}},
];

3,想要滚动到特定的位置

默认的,将高光元素作为attachTo绑定后,执行下一步,shepherd会将整个高光元素显示在页面上,导致引导元素被顶上去在屏幕中不可见了。

这个使用scrollToHandler函数将默认的滚动事件覆盖,然后控制窗口滚动到特定位置即可。

4,修改引导元素的样式

在step.js配置文件 中的classes就是引导元素的class,可以自己手动修改样式:

.shepherd-welcome {margin-top:20px!important;
}

5,新手引导的时候不希望用户操作界面,不希望页面滚动

import { ShepherdTourContext } from 'react-shepherd';const tour = useContext(ShepherdTourContext);tour?.on('start', () => {ele?.addEventListener('click', handler, true);famousEle.style.overflow = 'hidden';});tour?.start();tour?.on('complete', () => {ele?.removeEventListener('click', handler, true);famousEle.style.overflow = 'scroll';});

6,效果

7,附加样式文件shepherd.less

https://download.csdn.net/download/kalinux/87473193

好朋友们,如果解决了你的燃眉之急,又无处感谢,可以点击下方的打赏,多少不重要,鼓励一下kalinux吧 [呲牙]

相关文章:

(HP)新手引导使用react-shepherd

1&#xff0c;官方参数文档&#xff1a;https://shepherdjs.dev/docs/tutorial-02-usage.html 2&#xff0c;基本代码 import { ShepherdTour } from react-shepherd; import ./index.less; // 自己的样式文件&#xff0c;用来修改样式 import ./shepherd.less; // 将shephe…...

数据结构:栈和队列(Leetcode20. 有效的括号+225. 用队列实现栈+232. 用栈实现队列)

目录 一.数据结构--栈 1.栈的基本介绍 2.栈的实现 二.数据结构--队列 1.队列的基本介绍 2.队列的实现 三.栈的运用(Leetcode20. 有效的括号225) 1.问题描述 2.问题分析 题解代码&#xff1a; 四.用两个队列实现栈(225. 用队列实现栈 - 力扣&#xff08;Leetcode&a…...

22.2.19周赛双周赛(贪心、记忆化搜索...)

文章目录双周赛98[6359. 替换一个数字后的最大差值](https://leetcode.cn/problems/maximum-difference-by-remapping-a-digit/)[6361. 修改两个元素的最小分数](https://leetcode.cn/problems/minimum-score-by-changing-two-elements/)贪心排序[6360. 最小无法得到的或值](ht…...

2023最新软件测试面试题(带答案)

1. 请自我介绍一下(需简单清楚的表述自已的基本情况&#xff0c;在这过程中要展现出自信&#xff0c;对工作有激情&#xff0c;上进&#xff0c;好学) 面试官您好&#xff0c;我叫###&#xff0c;今年26岁&#xff0c;来自江西九江&#xff0c;就读专业是电子商务&#xff0c;毕…...

【C++】类型转换方法

本篇博客让我们来见识一下C中新增的类型转换方法 文章目录1.C语言中类型转换2.C中的强制类型转换2.1 static_cast2.2 reinterpret_cast2.3 const_castvolatile关键字2.4 dynamic_cast3.C强制类型转换的作用4.RTTI1.C语言中类型转换 在C语言中&#xff0c;类型转换有下面两种形…...

100亿级订单怎么调度,来一个大厂的极品方案

背景 超时处理&#xff0c;是一个很有技术难度的问题。 所以很多的小伙伴&#xff0c;在写简历的时候&#xff0c;喜欢把这个技术难题写在简历里边&#xff0c; 体现自己高超的技术水平。 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;尼恩经常指导大家 优化简历。 最…...

C++性能白皮书

最近看完了《C性能白皮书》&#xff0c;这本书列出了一些性能优化的思路&#xff0c;不过只是一些指引&#xff0c;没有讲具体细节&#xff0c;我整理出了其中的关键点分享给大家&#xff1a; 硬件篇 作为一个程序员&#xff0c;想要性能优化&#xff0c;最好要了解些硬件&…...

华为OD机试 - 黑板上色 | 机试题算法思路 【2023】

最近更新的博客 华为OD机试 - 简易压缩算法(Python) | 机试题算法思路 【2023】 华为OD机试题 - 获取最大软件版本号(JavaScript) 华为OD机试 - 猜字谜(Python) | 机试题+算法思路 【2023】 华为OD机试 - 删除指定目录(Python) | 机试题算法思路 【2023】 华为OD机试 …...

如何在六秒内吸引观众的注意力

根据《2022国民专注力洞察报告》显示&#xff0c;当代人的连续专注时长&#xff0c;已经从2000年的12秒&#xff0c;下降到了现在的8秒。对于这个事实你可能难以相信&#xff0c;实际上这意味着&#xff0c;大多数互联网用户跳到一些页面上时&#xff0c;可能眼皮都不眨一下就离…...

FreeRTOS与UCOSIII任务状态对比

FreeRTOS任务状态 1、运行态 正在运行的任务&#xff0c;正在使用处理器的任务。 单核处理器中任何时候都有且只有一个任务处于运行态。 2、就绪态 已经准备就绪&#xff08;非阻塞或挂起&#xff09;&#xff0c;可以立即运行但还没有运行的任务。 正在等待比自己高优先级…...

小程序 npm sill idealTree buildDeps 安装一直没反应

目录 一、问题 二、解决 1、删除.npmsrc 、清除缓存 2、更换镜像源 3、最终检测 一、问题 记录&#xff1a;今天npm 一直安装不成功 显示&#xff1a;sill idealTree buildDeps 我的版本&#xff1a; 我百度到换镜像源安装方法&#xff0c;但我尝试后&#xff0c;依然…...

GPT系列详解:初代GPT

本文详细解读了OpenAI公司在2018年6月发布的论文《Improving Language Understanding by Generative Pre-Training》&#xff0c;它其中介绍的算法也就是后来人们说的GPT。本文借鉴了李沐的这个视频&#xff0c;感兴趣的同学可以移步观看大神的讲解。 目录引言GPT方法无监督预训…...

为什么要使用数据库

数据保存在内存优点&#xff1a;存取速度快缺点&#xff1a;数据不能永久保存数据保存在文件优点&#xff1a;数据永久保存缺点&#xff1a;1&#xff09;速度比内存操作慢&#xff0c;频繁的IO操作。2&#xff09;查询数据不方便数据保存在数据库1&#xff09;数据永久保存2&a…...

【单目标优化算法】海鸥优化算法(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

筑基六层 —— 整型提升及实用调式技巧

目录 一.修炼必备 二. 整型提升 三.实用调式技巧 一.修炼必备 1.入门必备&#xff1a;VS2019社区版&#xff0c;下载地址&#xff1a;Visual Studio 较旧的下载 - 2019、2017、2015 和以前的版本 (microsoft.com) 2.趁手武器&#xff1a;印象笔记/有道云笔记 3.修炼秘籍&…...

后端前端文件传输2中传出模式

base64文件传输 app.route(/download, methods[get]) def hello_as(): # 数据 id request.args.get("id") cur g.db.cursor() cur.execute(fselect name,grade,commentNum,cityName,sceneryThemeName from dataList where cityId? , (id,)) …...

【ZOJ 1067】Color Me Less 题解(vector+开方)

问题 颜色缩减是从一组离散颜色到较小颜色的映射。这个问题的解决方案需要在标准的24位RGB颜色空间中执行这样的映射。输入由十六个RGB颜色值的目标集合和要映射到目标集合中最接近的颜色的任意RGB颜色集合组成。为了我们的目的&#xff0c;RGB颜色被定义为有序三元组&#xff…...

凌恩生物经典文章:孟德尔诞辰200周年,Nature Genetics礼献豌豆高质量精细图谱

本期为大家分享的文章是2022年发表在《Nature Genetics》上的一篇文章“Improved pea reference genome and pan-genome highlight genomic features and evolutionary characteristics”&#xff0c;作者通过结合三代pacbio测序、染色体构象捕获&#xff08;Hi-C&#xff09;测…...

进程间通信(二)/共享内存

⭐前言&#xff1a;在前面的博文中分析了什么的进程间通信和进程间通信的方式之一&#xff1a;管道&#xff08;匿名管道和命名管道&#xff09;。接下来分析第二种方式&#xff1a;共享内存。 要实现进程间通信&#xff0c;其前提是让不同进程之间看到同一份资源。所谓共享内存…...

电路模型和电路定律——“电路分析”

各位CSDN的uu们你们好呀&#xff0c;今天小雅兰的内容是我这学期的专业课噢&#xff0c;首先就学习了电路模型和电路定律&#xff0c;包括电路和电路模型、电流和电压的参考方向、电功率和能量、电路元件、电阻元件、电压源和电流源、基尔霍夫定律。那么现在&#xff0c;就让我…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

LangChain 中的文档加载器(Loader)与文本切分器(Splitter)详解《二》

&#x1f9e0; LangChain 中 TextSplitter 的使用详解&#xff1a;从基础到进阶&#xff08;附代码&#xff09; 一、前言 在处理大规模文本数据时&#xff0c;特别是在构建知识库或进行大模型训练与推理时&#xff0c;文本切分&#xff08;Text Splitting&#xff09; 是一个…...