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)
构造函数
- toggleModel(modal: StepGuidanceEnum)
切换模式
- addNode(el: HTMLElement)
将元素添加进步骤中
-
save() ⇒
string 保存
- loadData(stepMap?: string)
加载步骤数据
- preview()
预览
- previewByKey(startKey: string)
设置预览的开始位置，并预览
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 |