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

关于新手指导IntroJS,vue项目(vue3)和react项目(ant-design)的引用

安装插件

npm i introJs 

一、vue3项目中引用intro作新手引导

src/utils/util.js文件

import introJs from 'intro.js'/*** @name: 新手指导* @param {String} pathname 当前页面的path* @param {Array} stepsArr 步骤内容(包括element、intro)* @return {*}*/
export function guide (pathname, stepsArr) {let guideObj = JSON.parse(localStorage.getItem('guide')) || {}if (!guideObj[pathname]) {guideObj[pathname] = '1'localStorage.setItem('guide', JSON.stringify(guideObj))introJs().setOptions({'prevLabel': '← 上一步','nextLabel': '下一步 →','doneLabel': '我知道了',"skipLabel": '跳过','showProgress': false,'disablInteraction': true,'steps': stepsArr}).start()}
}

xxx.vue文件

import * as Util from '@/utils/util.js' //引入公共封装的函数<template><el-button id="step1">导入商品</el-button>
</template>mounted () {// 新手指导const stepsArr = [{element: '#step1',// id为step1的元素intro: '可以批量导入商品至购物车',position: 'left'}]Util.guide(this.$route.path, stepsArr) // 调用函数并传参
}

index.scss

// 新手指导 优化样式
.introjs-helperLayer {box-shadow: rgba(190, 190, 190, 0.2) 0px 0px 0px 5000px, rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;
}.introjs-tooltip {background-color: rgba(190, 190, 190, 0.0) !important;color: #fff;border: 2px dashed #fafafa;box-shadow: 0 0 black !important;
}.introjs-arrow.top,
.introjs-arrow.top-middle,
.introjs-arrow.top-right {border-color: transparent transparent #fafafa !important;top: -20px;left: 20px;
}.introjs-skipbutton:hover,
.introjs-skipbutton:focus {color: #fafafa;outline: none;text-decoration: none;
}.introjs-arrow.top,
.introjs-arrow.top-middle,
.introjs-arrow.top-right {border-color: transparent transparent #fafafa !important;top: -20px;left: 20px;
}.introjs-arrow.bottom,
.introjs-arrow.bottom-middle,
.introjs-arrow.bottom-right {border-color: #fafafa transparent transparent !important;bottom: -20px;left: 20px;
}.introjs-arrow.left,
.introjs-arrow.left-bottom {left: -20px;border-color: transparent #fafafa transparent transparent !important;
}.introjs-skipbutton {color: #fafafa !important;
}.introjs-bullets ul li a.active {width: 15px;background: #fafafa !important;
}.introjs-button {padding: 5px !important;
}

二、React项目中引用intro作新手引导

在这里插入图片描述

src/utils/public.js文件

import introJs from 'intro.js';
/*** @name: 新手指导* @description 若该界面是第一次进入,就存对应的 guide:{pathname:1} 在localStorage里面,* @param {String} pathname 当前页面的path* @param {Array} stepsArr 步骤内容(包括element、intro)* @return {*}*/export function guide (pathname, stepsArr) {const guideObj = JSON.parse(localStorage.getItem('guide')) || {}if (!guideObj[pathname]) {guideObj[pathname] = '1'localStorage.setItem('guide', JSON.stringify(guideObj))if (stepsArr) {introJs().setOptions({'steps': stepsArr})}introJs().setOptions({'prevLabel': '&larr; 上一步','nextLabel': '下一步 &rarr;','doneLabel': '我知道了','showProgress': false,'disablInteraction': true,'steps': stepsArr}).start().oncomplete(() => {});}
}

xxx.jsx文件

import * as Public from '@/utils/public';// 新手指导useEffect(() => {const stepsArr = [{element: '#step1', // id为step1的元素intro: '点击“价格波动”即可查询商品的历史价格波动哦~',position: 'bottom'},{element: '#step2',intro: '点击“待办事项”可以查看到目前需要处理的工作哦~',position: 'bottom'},{element: '#step3',intro: '点击“预警事项”即可展示出商品库存不足或者商品临期',position: 'bottom'},{element: '#step4',intro: '点击“今日数据”即可展示出今天的业务量',position: 'top'}]Public.guide(history.location.pathname, stepsArr)}, [])

global.less

// 新手指导 优化样式
.introjs-helperLayer {box-shadow: rgba(190, 190, 190, 0.2) 0px 0px 0px 5000px, rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;
}
.introjs-tooltip {background-color: rgba(190, 190, 190, 0.0) !important;color: #fff;border: 2px dashed #fafafa;box-shadow: 0 0 black !important;
}
.introjs-arrow.top, .introjs-arrow.top-middle, .introjs-arrow.top-right {border-color: transparent transparent #fafafa !important;top: -20px;left: 20px;
}
.introjs-skipbutton:hover, .introjs-skipbutton:focus {color: #fafafa;outline: none;text-decoration: none;
}
.introjs-arrow.top, .introjs-arrow.top-middle, .introjs-arrow.top-right {border-color: transparent transparent #fafafa !important;top: -20px;left: 20px;
}
.introjs-arrow.bottom, .introjs-arrow.bottom-middle, .introjs-arrow.bottom-right {border-color: #fafafa transparent transparent !important;bottom: -20px;left: 20px;
}
.introjs-arrow.left, .introjs-arrow.left-bottom {left: -20px;border-color: transparent #fafafa transparent transparent !important;
}
.introjs-skipbutton {color: #fafafa !important;
}
.introjs-bullets ul li a.active {width: 15px;background: #fafafa !important;
}

localStorage里面的存储的效果如下
在这里插入图片描述

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

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

Centos7启动Eclipse Ditto项目

Centos7启动Eclipse Ditto项目1.安装Oracle VM VirtualBox虚拟机&#xff0c;并安装centos7详细安装记录2.安装Docker3.Eclipse Ditto1.安装Oracle VM VirtualBox虚拟机&#xff0c;并安装centos7详细安装记录 详见win10安装oracle vm virtualbox&#xff0c;并安装centos7详细…...

C语言之重定向和文件(更新中)

一、C程序中要包含stdio.h头文件才可以直接使用putchar()、getchar()函数、printf()函数&#xff0c;scanf()函数&#xff0c;它们都是C语言标准I/O包的成员。 二、ANSI C 和后续的C标准都规定输入是缓冲的。缓冲区的大小取决于系统&#xff0c;常见大小512字节和4096字节。 缓…...

开发手札:git日常抽风记录

今天一大早代码提交不上github&#xff0c;各种方法解决不了&#xff0c;虽然最终不知道是否根治解决了&#xff0c;但是起码目前没问题&#xff0c;所以记录一下。 今天来公司三台开发机&#xff08;两台window、一台macos&#xff09;全部ssh connect timeout errorcode 22或…...

链表 + 数组模拟链表

链表的指针实现 1.指针 #include<iostream> using namespace std; int main(){int a 5;int *p; // int 型的指针double *q; //double 型的指针p &a;// cout << p 指向 acout << *p << endl; //间接输出 areturn 0; }2.申请动态内存&#xff08…...

深入理解cloud 题外话1:httpPool连接池工具类配置,logback.xml,feign日志配置

httpPool Configuration public class HttpPool {Beanpublic HttpClient httpClient(){System.out.println("init feign httpclient configuration " );// 生成默认请求配置RequestConfig.Builder requestConfigBuilder RequestConfig.custom();// 超时时间request…...

vue 实现两级表头表格下载

首先需要引用两个js Blob.js 对应第一个 Export2Excel.js 对应第二个 /* eslint-disable */ /* Blob.js* A Blob implementation.* 2014-05-27** By Eli Grey, http://eligrey.com* By Devin Samarin, https://github.com/eboyjr* License: X11/MIT* See LICENSE.md*//*glo…...

Laravel ORM 订单 分表

Laravel ORM 订单 分表创建数据 简介数据库表用户表订单表订单商品表示例ORM新建 `_Model.php`文件。作为基类`Order.php` 订单模型继承_Model`OrderGoods.php` 订单商品继承_Model控制器订单入库访问简介 开发项目,经常碰到订单量暴增的问题,简单点处理,需要给订单表做分表…...

第一次动手构建 Linux 内核(未完待续)

目录背景机器参数参考链接操作流程步骤1&#xff1a;下载 Linux 内核源码步骤 2&#xff1a;解压源码步骤 3&#xff1a;下载所需软件包步骤 4&#xff1a;内核配置步骤 5&#xff1a;开始构建&#xff01;未完待续背景 这两天读《UNIX传奇&#xff1a;历史与回忆》这本书&…...

Spring学习:工厂方法创建 Bean

目录通过调用静态工厂方法创建 Bean通过调用实例工厂方法创建 Bean通过调用静态工厂方法创建 Bean 调用静态工厂方法创建 Bean是将对象创建的过程封装到静态方法中。当客户端需要对象时, 只需要简单地调用静态方法, 而不同关心创建对象的细节。 要声明通过静态方法创建的 Bean:…...

运行时数据区-虚拟机栈

文章目录谈谈你对虚拟机栈的理解栈帧什么是栈帧&#xff08;Stack Frame)当前栈帧栈帧的内部结构局部变量表Slot操作数栈Operand Stack动态链接方法返回地址一些附加信息虚方法和非虚方法方法的调用&#xff1a;虚方法表面试题方法中定义的局部变量是否线程安全&#xff1f;运行…...

常见运维问题(打印机、重装系统、IE)

连接打印机与驱动安装 制作U盘系统盘 新系统没有网卡时离线驱动安装 IE浏览器安全级别设置 IP地址的查询 处理操作来源于网络资源&#xff08;尊重原创&#xff09;&#xff1a;原创博客链接...

活动目录备份和灾难恢复之自动备份与授权还原

前言 由于服务器系统状态总在变化&#xff0c;因该增加对系统状态备份的频率&#xff0c;来减少备份对服务器工作环境的影响&#xff0c;所以最好是每天晚上对服务器系统状态进行备份&#xff0c;但是单独使用wbadmin命令无法创建系统状态的自动备份计划&#xff0c;此时可以使…...

TCP“三次挥断”的原因TCP延迟确认机制

在学习wireshark抓包的时候&#xff0c;一般都从最简单的三次握手和四次挥断看起&#xff0c;因为这两步对于每一个完整健康的TCP交互流来说都是必不可少的&#xff0c;通过抓包我们可以更清楚的了解其工作机制。 一、四次挥断和“三次挥断” 1、第一种情况 比如在电脑cmd发…...

HDU 1536 S-Nim

1536 #include<bits/stdc.h> using namespace std; int s[110],sg[10010]; int k; int SG(int x){if(sg[x]!-1)return sg[x];bool vis[110];memset(vis,0,sizeof(vis));for(int i0;i<k;i){if(x>s[i]){SG(x-s[i]);vis[sg[x-s[i]]]1;}}for(int i0;;i){if(!vis[i]){...

Redis 内存淘汰机制

Redis 内存淘汰机制 【问题一】 过期字典的方法很好&#xff0c;但还是有可能会出问题。因为定期删除和惰性删除还是有可能造成大量过期的 key 没被删除&#xff0c;堆积在内存中。非常容易就 内存溢出了 Out of memory。 【问题二】 如何保证 Redis 中的数据都是热点数据 &am…...

2021年Java开发爆款推荐!docker部署tomcat

一.java基础面试知识点 java中和equals和hashCode的区别 int、char、long各占多少字节数 int与integer的区别 探探对java多态的理解 String、StringBuffer、StringBuilder区别 什么是内部类&#xff1f;内部类的作用 抽象类和接口区别 抽象类的意义 抽象类与接口的应用…...

错题小笔记13——序列化、serialVisionUID的作用

序列化&#xff1a;将数据结构转换称为二进制数据流或者文本流的过程。序列化后的数据方便在网络上传输和在硬盘上存储。 反序列化&#xff1a;是将二进制数据流或者文本流转换称为易于处理和阅读的数据结构的过程。本质其实还是一种协议&#xff0c;一种数据格式&#xff0c;…...

HTTP与HTTPS的区别

HTTP与HTTPS的区别 HTTP &#xff08;HyperText Transfer Protocol&#xff1a;超文本传输协议&#xff09; HTTP&#xff08;HyperText Transfer Protocol&#xff1a;超文本传输协议&#xff09;是一种用于分布式、协作式和超媒体信息系统的应用层协议。 简单来说就是一种发…...

阿里P8大牛亲自讲解!java静态变量和实例变量

Redis主从复制 概念 Redis的主从复制概念和MySQL的主从复制大概类似。一台主机master&#xff0c;一台从机slaver。master主机数据更新后根据配置和策略&#xff0c;自动同步到slaver从机&#xff0c;Master以写为主&#xff0c;Slave以读为主。 主要用途 读写分离&#xff1…...

5. 断路器hystrix dashboard turbine

hystrix使用 feign中使用 hystrix feign:hystrix:enabled: true #必须配置Component public class EurekaClientHystrix implements EurekaClientFeign{}使用feign配置了&#xff0c;这些&#xff0c;即可进行回退 Feign 的起步依赖中已经包含Hystrix依赖&#xff0c;所以只…...

nuxt中使用svg 开发svg组件

为什么要使用SVG 虽然我们在日常开发的时候&#xff0c;在使用iview 或者element ui等组件时&#xff0c;通常会包含一些常用icon&#xff1b;但是在面对一些特定的需求时&#xff0c;或者自己想high一下&#xff0c;这些通用的icon并不能很好的满足我们。这个时候我们可能会拿…...

A - Til the Cows Come Home POJ - 2387

A - Til the Cows Come Home POJ - 2387 最短路 #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #include<queue> using namespace std; const int maxn 2010; typedef pair<int, int> PII; // first 存距离…...

C#不同状态的按钮 消失or显示

效果展示&#xff1a; 点击前 点击后 //而且 ”备注“ 变成可编辑状态 点击确定后 编辑成功 并变为初始 只有一个的” 编辑 “按钮 并在listView更改成功 列表样式 解决方案&#xff1a; 首先创建三个Button 都放在一个位置上 当然需要有一个按钮重合在编辑上面&#xff08;为…...

vue--CompositionAPI 中如何使用 VueX

a.同步方法改变数据&#xff1a; Home.vue <template><div class"home"><img alt"Vue logo" src"../assets/logo.png"><h1>{{name}}</h1></div> </template><script> import {toRefs} from v…...

5. 断路器hystrix dashboard turbine

hystrix使用 feign中使用 hystrix feign:hystrix:enabled: true #必须配置Component public class EurekaClientHystrix implements EurekaClientFeign{}使用feign配置了&#xff0c;这些&#xff0c;即可进行回退 Feign 的起步依赖中已经包含Hystrix依赖&#xff0c;所以只…...

springBoot 一键启动多个服务

我们启动springboot服务时经常一个一个去启动,这样操作显然是非常麻烦的,那么怎样让他一键启动多个服务呢? 第一步:打开设置 第二步:选择Compound 第三步:选择你要启动的服务 第四步:点击就可以一键启动了...

JavaScript 字面值对象的一些基本方法

展开运算符的使用 //构造字面量对象时使用展开语法 let person {name:tom,age:18} let person2 {...person} //展开运算符展开对象属性时&#xff0c;只能在对象中进行展开 //console.log(...person); //报错&#xff0c;展开运算符不能直接展开对象 console.log(我是perso…...

深入理解cloud 题外话1:httpPool连接池工具类配置,logback.xml,feign日志配置

httpPool Configuration public class HttpPool {Beanpublic HttpClient httpClient(){System.out.println("init feign httpclient configuration " );// 生成默认请求配置RequestConfig.Builder requestConfigBuilder RequestConfig.custom();// 超时时间request…...

Eclipse打开源码失败

解决&#xff1a;找不到源码&#xff0c;需要链接源码附件。...

黄色固体或黄色油状物PC Biotin-Azide;photoclevable Biotin-N3是可分解的生物素

名 称&#xff1a;PC Biotin-Azide&#xff1b;photoclevable Biotin-N3 外 观&#xff1a;黄色固体或黄色油状物 分子式&#xff1a;C35H55N9O12S 分子量&#xff1a;825.37 纯度&#xff1a;>95% 溶解度&#xff1a;Water, DMSO, DMF 保存条件&#xff1a;-20℃ 12个…...

dbc2000 注册机|dbc2000 注册码注册机下载

点击下载来源&#xff1a;dbc2000 注册机 dbc2000 注册机是同名源程序软件的注册机软件&#xff0c;该源程序软件是一款应用于数据库搭建以及数据写入的数据库架设工具&#xff0c;它拥有强大的数据写入功能&#xff0c;在作为应用程序使用时&#xff0c;它不仅可以充当数据属性…...

秋招面经第八弹:网易二面-数据开发工程师

秋招第八弹&#xff1a;网易二面-数据开发工程师 写在最前&#xff1a;秋招以来一直在冲&#xff0c;因为事情比较多&#xff0c;对于笔试面试一直没有复盘&#xff0c;现在靠仅存的记忆把面试的一些问题记录下来&#xff0c;尽可能记录出能回忆到的问题&#xff0c;但可能记的…...

安卓课程格子APP

https://download.csdn.net/download/weixin_57836618/73810452 功能演示&#xff1a; 查看所有课程 点击主页面空白处即可添加课程 添加课程之后查看课程 查看双周课程 查看单周课程 6.查看课程详情...

强化学习——格子世界

强化学习——格子世界 项目源码地址&#xff1a;https://gitee.com/infiniteStars/machine-learning-experiment 1. 实验内容 2. 实验代码 import numpy as np import matplotlib.pyplot as plt from matplotlib.table import Table from xml.dom.minidom import Document #手…...

华为机试 - 跳格子游戏

目录 题目描述 输入描述 输出描述 用例 题目解析 算法源码 题目描述 地上共有N个格子&#xff0c;你需要跳完地上所有的格子&#xff0c;但是格子间是有强依赖关系的&#xff0c;跳完前一个格子后&#xff0c;后续的格子才会被开启&#xff0c;格子间的依赖关系由多组st…...

php 爬课程表信息,Ruby爬取教务系统生成课程表

我为什么要虐自己最近觉得课程格子广告越来越多&#xff0c;乱七八糟的东西越来越多&#xff0c;完全失去了一开始的存在价值&#xff0c;并且没有电脑端app&#xff0c;想查看课程必须拿出手机&#xff0c;而我使用电脑频率要比手机高&#xff0c;所以才有了折腾的动力。于是我…...

android 课程表 ui,UICollectionViewLayout实现课程表布局

因为项目中有课程表的相关模块&#xff0c;第一时间想到用UICollectionView。然而后期的需求越来越复杂&#xff0c;每个格子需要展示的内容越来越多&#xff0c;所以不得不寻找合适的解决方案。最后发现自定义UICollectionViewLayout可以实现我的需求。先放效果图&#xff1a;…...

Android自定义View课程表,Android 自定义View课程表表格

自己闲下来时间写的一个课表控件使用的自定义LinearLayout 里面View都是用代码实现的 最终效果如下图 写的可能有问题希望多多指点创建一个自定义LinearLayout 控件用来装载课程的信息和课程的周数 和节数大概的布局三这样的根据上面的看来觉得总体布局我分了两个 上面的星期是…...

java课程设计设计_java课程设计

1. 团队课程设计博客链接https://www.cnblogs.com/choco1ate/p/12172223.html2.本组课题及本人任务本组课题&#xff1a;泡泡堂(炸弹人)游戏本人任务&#xff1a;Box类(游戏地图中的每个方格)Bomb类(游戏过程中的)游戏玩家输赢信息的文件储存3.需求分析Box类&#xff1a;该类为…...

《课程格子》的一个笔试题目

题目如下&#xff0c;感觉很适合喜欢琢磨的程序员&#xff0c;也是考验你编码风格的时候。 Lets make a tower defense game&#xff08;塔防游戏):1. You have 1 tower, with H health and D dps(damage per second).2. There are n attackers, each with h_i health and d_i …...

Android仿照超级课程表 or 课程格子 一键提取课表功能(方正系统)

参考文章http://blog.csdn.net/sbsujjbcy ,本文仿照‘ 安卓弟 提供的android 项目实战——打造超级课程表一键提取课表功能文章&#xff0c;对他的代码进行了修改和补充&#xff0c;为什么要修改呢&#xff1f;原因是安卓弟的那个源码版本过于老旧&#xff0c;很多方法已经过…...

树莓派环境搭建

树莓派环境搭建文档 1.准备一个读卡器 2.在树莓派官网下载Raspberry Pi Imager软件(https://www.raspberrypi.com/software/)进行烧录&#xff0c; 3.安装完成后打开Raspberry Pi Imager&#xff0c;CHOOSE OS&#xff1a;这里选择推荐的32位树莓派操作系统&#xff1a; CH…...

腾讯云局域网 深信服easyconnect + 端口映射实现vpn共享

问题描述&#xff1a;公司有两台托管服务器在私有机房不能访问互联网&#xff0c;只能通过深信服vpn与外界通信&#xff0c;我们大部分服务已经上云&#xff0c;腾讯云局域网所有linux服务器都需要访问这两台服务器。 解决方案&#xff1a;在腾讯云局域网内增加一台windows se…...

[保姆级]使用SoftEther搭建异地局域网(windows)

前言 最近在跟小伙伴进行一个前后端分离开发的项目(在各自家中进行), 但是我们都不在一个局域网, 那么怎么办呢? 当然是搭建自己的虚拟局域网啦! SoftEther 是什么? 该软件是一个能虚拟网卡和集线器&#xff08;HUB&#xff09;的工具&#xff0c;只要可以访问互联网&#x…...

GRE VPN

L7 VPN SSL L3 VPN GRE IPSEC L2 VPN L2TP GRE: Ethernet IP GRE IPX Payload ip rout peer-site-subnet tunnel-name tunnel: IP, Protocol, Source IP, Destination IP Configuration Tip: IP/Zone->Tunnel->Route->Policy interface tunnel1ip add 192.168.3....

三分钟教会你搭建gre over ipsec隧道

华为gre over ipsec隧道实验&#xff08;附ssh无法登陆问题&#xff09;技术简介实验拓扑环境介绍配置文件基础配置基础配置测试虚拟专用网络部分配置虚拟专用网络测试特殊场景技术简介 VPN&#xff1a;虚拟专用网络&#xff0c;旨在解决不同内网穿越公网实现互访的问题&#…...

linux(centos)快捷搭建

搭建vpn的方式很多&#xff0c;但是我推荐l2tp&#xff0c;它最大的优势在于跨平台、无需额外的客户端&#xff1b;效果也并不比纸飞机、openvpn差. 直接执行现成的命令脚本即可&#xff1a; yum -y update && cd /tmp && wget https://raw.githubuserconten…...

Windows Server 2016搭建SSTP

文章目录1、拓扑图2、任务描述3、DC配置4、VPNS配置1、拓扑图 2、任务描述 DC部署域控制器DC部署证书颁发机构DC创建vpn连接用户VPNS1搭建虚拟专用网路 3、DC配置 安装域控制器&#xff1a;Install-WindowsFeature ad-domain-services -IncludeAllSubFeature -IncludeManage…...

网安学习(二十二)搭建公司和分公司虚拟专线

虚拟专用网络 虚拟专用网络 虚拟专用网络可以实现在不安全的网络上&#xff0c;安全的传输数据 虚拟专用网络只是一个技术&#xff0c;使用PKI技术&#xff0c;来保证数据的安全三要素 虚拟&#xff1a;不需要拥有实际的长途线路&#xff0c;使用公共网络资源建立自己的私有…...

ICMP隧道搭建

概述 ICMP隧道简单、实用&#xff0c;是一个比较特殊的协议。最常见的ICMP消息为ping命令的回复&#xff0c;攻击者可以利用命令行得到比回复更多的ICMP请求。在一些网络环境中&#xff0c;如果攻击者使用各类上层隧道(HTTP隧道、DNS隧道、常规正/反向端口转发等)进行的操作都…...