关于前端:改造driverjs-打造业务通用的新手引导插件

35次阅读

共计 561 个字符,预计需要花费 2 分钟才能阅读完成。

革新 driver.js, 减少本人想要的款式,动静更改每一步的操作按钮的文案,并提供下一步、跳过、实现操作之后的回调能力!

原由

对于 driver.js, 大家能够理解一下,是一个还算不错的做疏导的插件, 然而在生产实践中有一些毛病:

  • 库没有提供扭转疏导面板款式的办法,只有设置元素显隐和遮罩背景的透明度
  • 没有提供动静扭转疏导面板操作按钮显隐及更新按钮文案的能力,只能在初始化时定义好

介于以上两个痛点,基于 driver.js 简略革新一下这个库
首先咱们看下这个库是怎么应用

装置

npm i driver.js

应用


应用办法还是比较简单的,间接定义好要疏导元素的 id 属性、疏导文案、绝对地位就能够了。

开始咱们的革新

第一步:更改款式

xdm,我间接贴代码

第二步:封装操作插件

因为咱们业务中须要扭转敞开按钮的文案为:跳过 ${以后是第几步}/${总步数},所以用了一种不怎么优雅的形式动静扭转以后第几步,亲测可用!

而后在下一步、跳过、实现操作中退出回调函数参数,这样就能够在实现或者跳过的时候申请接口或者更改缓存标记用户曾经看过疏导了,比拟不便!

第三步:在页面中应用

总结
做老手疏导的需要本来是比拟繁琐和苦楚的一件事,代码侵入性也比拟强,如果能封装成可复用的插件或者工具,可大大节俭咱们的开发调试疏导地位款式的工夫,如果我的文章对你有帮忙,感激你的一键三连。

正文完
 0