React实现Intro效果(基础简单)

下载:利用Intro.js实现简单的新手引导

复制代码
npm install intro.js --save

yarn add intro.js

第一步:在我们需要引导的页面引入

复制代码
import introJs from 'intro.js';
import 'intro.js/introjs.css';  //css是下载成功后就有的

第二步:在组件页面

复制代码
  const intro: any = useRef(null);
  useEffect(() => {
    const hasSeenIntro = localStorage.getItem('hasSeenIntro');  //在这里进行判断,判断是否已经引导过,如果是,则不再进行
    if (!hasSeenIntro) {
      intro.current = introJs();
      intro.current.setOptions({
        steps: [
          // 引导步骤配置
          {
            element: '.one', // 要引导的元素的选择器或DOM节点
            intro: '可以根据这里查看我们数据的数据', // 步骤的简要介绍
            position: 'right' // 引导框相对于目标元素的位置
          },
          {
            element: '.topMessage', // 要引导的元素的选择器或DOM节点
            intro: '这里可以查看信息以及其数据', // 步骤的简要介绍
            position: 'right' // 引导框相对于目标元素的位置
          },
          {
            element: '.three', // 要引导的元素的选择器或DOM节点
            intro: '点击这里可以跳转到对应页面', // 步骤的简要介绍
            position: 'right' // 引导框相对于目标元素的位置
          }
        ],
        overlayOptions: {
          backgroundColor: 'rgba(128, 128, 128, 0.5)' // 设置背景颜色为灰色且透明
        },
        highlightClass: 'custom-highlight', // 自定义选中框的类名
        highlightPadding: 10, // 自定义选中框的内边距
        initialStep: 0 // 设置初始步骤为第一步(索引为0)
      });
      intro.current.start(); // 启动引导
      localStorage.setItem('hasSeenIntro', 'true'); // 记录用户已经执行过引导
    }
  }, []);

那么根据以上的示例,那么也相信我们在别的框架中也可以熟练的应用了。

以上则是intro实现效果的一些简单的应用,那么,如果想知道更多,则可以去查看以下官网:

Install Intro.js | Intro.js Docs

相关推荐
前端君2 小时前
实现最大异步并发执行队列
javascript
知识分享小能手4 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队5 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军5 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy5 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
林_深时见鹿6 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL6 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉6 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~6 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
GW_Cheng6 小时前
分享一个vue2的tinymce配置
开发语言·javascript·ecmascript