StepGuidance

StepGuidance 一个不侵入业务的，通过GUI动态创建步骤引导的工具 当然你也可以用他来编写网站的技术文档。

npm install step-guidance
or
yarn add step-guidance
or
<script src=dist/step-guidance.min.js></script>

feature

• 提供独立的预览工具包
• 提供工具包，更方便的编写步骤的自定义JavaScript的脚本
• 搭建后端服务，将数据保存到云端
• 提供自动化检查工具，检查出由于目标网站更新，而导致失效的步骤。
• 提供下载保存的步骤

example

// mpa
new StepGuidance();

// spa  vue
const app = new Vue(options);

new StepGuidance(app, app.$router);

API

constructor(context?: any, router?: any)

构造函数

| Param | Description | | --- | --- | | context | javascript执行脚本的自定义执行上下文对象 | | router | 对于spa应用，请传入路由对象(路由对象应包含push方法)。mpa应用忽略 |

toggleModel(modal: StepGuidanceEnum)

切换模式

| Param | Description | | --- | --- | | modal | StepGuidanceEnum ⇒ preview = 1、edit = 2、manage = 3 |

addNode(el: HTMLElement)

将元素添加进步骤中

| Param | Description | | --- | --- | | el | HTMLElement |

save() ⇒ string

保存 目前会保存在localStorage中，后续支持保存到云端

• 返回描述步骤的链表结构的json字符串

loadData(stepMap?: string)

加载步骤数据

| Param | Description | | --- | --- | | stepMap | 步骤的链表结构的json字符串。默认加载localStorage中保存的步骤数据 |

preview()

预览

与 toggleModel(1) 等效

previewByKey(startKey: string)

设置预览的开始位置，并预览

| Param | Description | | --- | --- | | startKey | 开始预览的key |