新手引导使用指南

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

twtiyb/tool-guide

新手引导使用指南