【React】使用react-joyride开发引导功能

本文链接：https://blog.csdn.net/guohaosir/article/details/130753433

【React】使用react-joyride开发引导功能

安装react-joyride

npm i react-joyride

// 引用
import Joyride, { Step } from 'react-joyride'

step数据：

 const steps: Step[] = [
    {
      target: () => uploadRef.current!,
      title: '上传文件',
     content: '点击“上传”按钮，上传会议相关文档，支持.pdf, .docx, .txt格式。',
      placement: 'bottom',
  },
    {
      target: selectAskValueRef.current!,
      title: <div className="text-left text-[16px] font-bold">选择提问范围</div>,
      content: (
        <div className="p-0 text-left text-[14px]">
          在会话栏内输入问题，即可面向整个知识库进行提问。。
        </div>
      ),
      placement: 'bottom',
      disableBeacon: true, // 隐藏小圆点
      spotlightPadding: 0, // 设置圆点大小为0，即隐藏
      styles: {
        tooltip: {
          textAlign: 'left',
          padding: '12px',
        },
        buttonNext: {
          backgroundColor: '#007bff', // 蓝色背景
          color: '#fff', // 白色字体
          border: 'none',
          fontSize: '14px',
          padding: '5px',
        },
        buttonBack: {
          color: '#007bff', // 使 "上一步" 按钮文字为蓝色
          fontSize: '14px',
          padding: '5px',
        },
      },
    },
    {
     target: messageInputRef.current!,
     title: '问答',
     content: '在会话栏内输入问题，回车或点击发送按钮，稍候即可得到答案。',
     placement: 'top',
    },
    {
      target: createNewChatRef.current!,
      title: <div className="text-left text-[16px] font-bold">创建</div>,
      content: (
        <div className="p-0 text-left text-[14px]">
          点击此处，即可创建新会话。
        </div>
      ),
      placement: 'bottom',
      styles: {
        tooltip: {
          textAlign: 'left',
        },
        buttonNext: {
          backgroundColor: '#007bff', // 蓝色背景
          color: '#fff', // 白色字体
          border: 'none',
        },
        buttonBack: {
          color: '#007bff', // 使 "上一步" 按钮文字为蓝色
        },
      },
    },
  ]

下面是使用

 <Joyride
        steps={steps}
        continuous
        scrollToFirstStep
        showSkipButton
        spotlightClicks
        spotlightPadding={0} // 去除高亮区域的填充，使弹窗直接显示
        styles={{
          options: {
            zIndex: 10000,
          },
          spotlight: {
            display: 'none', // 完全隐藏高亮区域
          },
          overlay: {
            backgroundColor: 'rgba(0, 0, 0, 0.5)', // 覆盖背景色
          },
          tooltip: {
            textAlign: 'left', // 弹窗标题和内容靠左对齐
            padding: '20px', // 可选：添加一些内边距让内容看起来更好
          },
        }}
        run={open}
        locale={{
          back: '上一步', // "Back" button text
          close: '结束引导', // "Close" button text when it's the last step
          last: '结束引导', // "Last" button text
          next: '下一步', // "Next" button text
          skip: '跳过', // "Skip" button text
        }}
      />

最后就搞定啦～～～