A General Novice Guidance Solution by Clicking the Next Button
一个通过点击下一步按钮来完成新手操作流程的解决方案
const guide = new Guide({
steps: [{
element: '.section_5',
placement: 'bottom',
content: 'https://yppphoto.hibixin.com/yppphoto/8c936439588546be907df129bc48d1f0.png'
}, {
element: '.section_7',
placement: 'bottomLeft',
content: 'https://yppphoto.hibixin.com/yppphoto/dd4a5f0a24154e36a09c67e6f8496aef.png'
}, {
element: '.image_4',
placement: 'bottomRight',
content: 'https://yppphoto.hibixin.com/yppphoto/6114d84ed9aa425e97363abf98643813.png'
}],
storageKey: 'demo'
})
setTimeout(() => {
guide.startStep()
}, 2000)参数
Guide.GuideOptions
| 参数 | 类型 | 描述 | 默认值 | 是否必传 |
|---|---|---|---|---|
| steps | Guide.Step[] | 步骤 | [] | 是 |
| offset | number | 高亮元素与指引图间隙 | 8px | 否 |
| storageKey | string | 数据存储key 不传不存 | '' | 否 |
Guide.Step
| 参数 | 类型 | 描述 | 默认值 | 是否必传 |
|---|---|---|---|---|
| element | HTMLElement | string | null | 高亮元素 |
| content | string | 提示内容 现在是张图 | 是 | |
| placement | Placement.PlacementEnum | 提示内容方位 | 是 |
Placement.PlacementEnum
export type PlacementEnum =
| 'top'
| 'left'
| 'right'
| 'bottom'
| 'topLeft'
| 'topRight'
| 'bottomLeft'
| 'bottomRight'
| 'leftTop'
| 'leftBottom'
| 'rightTop'
| 'rightBottom';demo 启动
npm run dev