当前位置: 首页 > 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;就让我…...

避开这些坑!Mapbox图层管理实战:动态加载GeoJSON数据的正确姿势

Mapbox高级图层管理实战&#xff1a;GeoJSON动态加载与性能优化全解析 当处理省级以上GIS数据可视化时&#xff0c;Mapbox的图层管理能力直接决定了应用的流畅度和用户体验。许多开发者在使用GeoJSON数据源时&#xff0c;常遇到内存泄漏、渲染卡顿、交互延迟等问题。本文将深入…...

从零构建32位MIPS单周期处理器:Logisim实战与24条核心指令实现详解

1. 从零理解MIPS单周期处理器 第一次接触CPU设计时&#xff0c;我盯着教科书上的数据通路图看了整整三天——那些密密麻麻的连线和缩写让我头晕目眩。直到用Logisim动手搭建了一个最简单的加法器&#xff0c;才突然明白处理器不过是精心设计的电子积木。单周期MIPS处理器就像乐…...

AI报告文档审核赋能数据不出域:IACheck重构机械制造行业本地化质量管控体系

在机械制造行业不断推进数字化与智能化转型的过程中&#xff0c;“数据不出域”逐渐从合规要求演变为一种核心能力&#xff0c;即在保障数据安全的前提下&#xff0c;实现数据的高效利用与价值转化&#xff0c;而在这一背景下&#xff0c;检测报告作为连接生产过程与质量评估的…...

手把手教你搭建PaddleOCR开发环境:从CUDA配置到模型验证

1. 环境准备&#xff1a;从零搭建PaddleOCR开发环境 最近在做一个票据识别的项目&#xff0c;需要用到OCR技术。对比了几种开源方案后&#xff0c;发现PaddleOCR不仅识别准确率高&#xff0c;而且对中文支持特别好。但在搭建环境时踩了不少坑&#xff0c;特别是CUDA和cuDNN的版…...

告别重复造轮子:用快马AI一键生成可配置的魔鬼面具UI组件库

作为一个经常需要处理各种UI组件的前端开发者&#xff0c;最近在做一个万圣节主题项目时&#xff0c;遇到了一个有趣的挑战&#xff1a;需要快速开发一套可配置的魔鬼面具组件库。传统手动编码方式不仅耗时&#xff0c;而且难以应对多风格需求。幸运的是&#xff0c;我发现了In…...

告别创作瓶颈:像素剧本圣殿应用指南,打造你的专属剧本工作站

告别创作瓶颈&#xff1a;像素剧本圣殿应用指南&#xff0c;打造你的专属剧本工作站 1. 像素剧本圣殿简介 像素剧本圣殿是一款基于Qwen2.5-14B-Instruct深度微调的专业剧本创作工具。它将AI推理能力与8-Bit复古美学完美融合&#xff0c;为创作者提供沉浸式的剧本开发体验。 …...

从编译到定制:WinSCP全流程开发指南

从编译到定制&#xff1a;WinSCP全流程开发指南 【免费下载链接】winscp WinSCP is a popular free file manager for Windows supporting SFTP, FTP, FTPS, SCP, S3, WebDAV and local-to-local file transfers. A powerful tool to enhance your productivity with a user-fr…...

PUBG罗技鼠标宏:告别压枪困扰的终极解决方案

PUBG罗技鼠标宏&#xff1a;告别压枪困扰的终极解决方案 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 还在为《绝地求生》中的武器后坐力而烦恼…...

3步解决字幕处理90%的麻烦:BiliBiliCCSubtitle效率革命

3步解决字幕处理90%的麻烦&#xff1a;BiliBiliCCSubtitle效率革命 【免费下载链接】BiliBiliCCSubtitle 一个用于下载B站(哔哩哔哩)CC字幕及转换的工具; 项目地址: https://gitcode.com/gh_mirrors/bi/BiliBiliCCSubtitle 开篇&#xff1a;三个真实场景的效率反差 场景…...

rust-bert 多语言翻译实战:支持 100+ 语言的智能翻译系统

rust-bert 多语言翻译实战&#xff1a;支持 100 语言的智能翻译系统 【免费下载链接】rust-bert Rust native ready-to-use NLP pipelines and transformer-based models (BERT, DistilBERT, GPT2,...) 项目地址: https://gitcode.com/gh_mirrors/ru/rust-bert rust-ber…...