AntdProv5+React如何实现用户操作引导页

最新推荐文章于 2024-08-01 14:20:35 发布

kabudada

最新推荐文章于 2024-08-01 14:20:35 发布

阅读量609

点赞数

分类专栏： Antd Pro 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/kabudada/article/details/127609380

版权

Antd Pro 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

antd Pro v5 的app.tsx是写在layout里的，常规的那种根据页面的class 或者Id去找元素不太好实现。

于是我选择在welcome 页面去实现。

按照react-intro.js

npm install intro.js-react

在welcome.tsx里引入

import { Steps } from 'intro.js-react';
import 'intro.js/introjs.css';

编写步骤信息

// const steps = [
//   {
//     element: '#leftMenuContainer',
//     intro: '欢迎来到DDOM 2.0!在这里可以看您想看的报表，并且支持搜索报表名称功能哟！',
//   },
//   {
//     element: '#topHeaderContainer',
//     intro: '在这里可以修改密码或退出登录！',
//   },
//   {
//     element: '#userIntroCard',
//     intro: '在这里可以查看您的个人信息！',
//   },
//   {
//     element: '#activeCard',
//     intro: '在这里可以查看报表地图，如无报表权限，请联系管理员为您开通！',
//   },
//   {
//     element: '#recentContainer',
//     intro: '在这里可以看到您最近访问的报表及收藏的报表！',
//   },
//   {
//     element: '#deadLineContainer',
//     intro: '在这里可以查看DDOM2.0最新动态！',
//   },
// ];

在组件内编写

  // const [stepsEnabled, setstepsEnabled] = useState(
  //   currentUser?.isFirstTimeLogin || (false as boolean),
  // );
  // const onIntroJs = () => {
  //   setstepsEnabled((bool: any) => !bool);
  // };

在组件的return中编写

      {/* <Steps
        enabled={stepsEnabled}
        steps={steps}
        initialStep={0} // 初始化从第几步骤开始
        onExit={() => setstepsEnabled(false)}
        options={{
          nextLabel: '下一步',
          prevLabel: '上一步',
          doneLabel: '知道了',
        }}
        onComplete={() => setstepsEnabled(false)}
      /> */}

此时有一个问题，就是我无法去框住welcome旁边的菜单和顶部。

想到的解决办法就是把空div绝对定位，手动调试到菜单和顶部上。

最后的效果如图：