你的导师-软件教学引导说明书

一、功能概述

$cq.系统_教学_引导功能用于创建一个交互式的教学引导流程，通过遮罩、高亮框和提示框引导用户完成一系列操作步骤。用户可以通过“上一步”“下一步”按钮在不同步骤间切换，也可以随时关闭引导。

二、核心方法与调用格式

1. $cq.系统_教学_引导().setGuide

$cq.系统_教学_引导().setGuide(guideSteps);

该方法用于设置教学引导的步骤列表。`guideSteps` 是一个包含多个步骤对象的数组，每个步骤对象包含 `selector`（目标元素的选择器）和 `text`（该步骤的提示文本）。

2. $cq.系统_教学_引导().start

$cq.系统_教学_引导().start();

该方法用于启动教学引导流程，显示遮罩、高亮框和提示框，并渲染第一步的内容。

3. $cq.系统_教学_引导().close

$cq.系统_教学_引导().close();

该方法用于关闭教学引导流程，移除遮罩、高亮框和提示框，同时还原目标元素的层级。

三、参数说明

1. $cq.系统_教学_引导().setGuide 参数

四、返回值

- `$cq.系统_教学_引导().setGuide`：无明确返回值，主要是设置引导步骤。 - `$cq.系统_教学_引导().start`：无明确返回值，主要是启动引导流程。 - `$cq.系统_教学_引导().close`：无明确返回值，主要是关闭引导流程。

五、使用示例

// 定义引导步骤
const guideSteps = [
    { selector: '#step1', text: '这是第一步的提示信息' },
    { selector: '#step2', text: '这是第二步的提示信息' },
    { selector: '#step3', text: '这是第三步的提示信息' }
];

// 设置引导步骤
$cq.系统_教学_引导().setGuide(guideSteps);

// 启动引导
$cq.系统_教学_引导().start();

// 关闭引导
// $cq.系统_教学_引导().close();
                

六、注意事项

• 确保 `guideSteps` 数组中的 `selector` 能够正确选择到目标元素，否则可能导致引导步骤无法正常显示。
• 在引导过程中，遮罩会覆盖页面，只有当前目标元素可点击，以确保用户按照引导步骤操作。
• 关闭引导后，会还原目标元素的层级，避免影响页面的正常布局。