页面分步引导组件Driver.js
在Web开发的时候，无意中发现了一下页面分步引导组件Driver.js。Driver.js是一个轻量级（约4kb gzip），并且无任何依赖，但功能强大的JavaScript引擎。Driver.js可以提高用户对页面的关注度，，也可以创建强大的分部引导介绍功能，号召性用语组件，焦点移位器等。更重要的是Driver.js支持所有的主流浏览器。下面雷雪松就详细的介绍一下页面分步引导组件Driver.js的用法。
1、Driver.js安装，可以使用script标签引入，也可以使用npm安装，import引入。
a、在html文件中用script标签引入driver.min.css文件和driver.min.js文件
1 | <script src="/dist/driver.min.js"></script> |
b、使用npm install driver.js，然后在文件中import导入。这样就可以很好的和Vue结合一起使用了。
1 | npm install driver.js |
1 2 | import Driver from 'driver.js'; import 'driver.js/dist/driver.min.css'; |
2、Driver.js基本用法。
a、单个节点高亮显示
1 2 | const driver = new Driver(); driver.highlight('#element'); |
b、高亮和弹出框
1 2 3 4 5 6 7 8 9 10 | const driver = new Driver(); driver.highlight({ element: '#element', popover: { title: '弹窗标题',//也可以使用HTML标签 description: '弹窗内容',//也可以使用HTML标签 position: 'bottom',//位置，可选值： left, left-center, left-bottom, top, top-center, top-right, right, right-center, right-bottom, bottom, bottom-center, bottom-right, mid-center offset: 20,//位移大小 } }); |
c、设置分步引导介绍功能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | const driver = new Driver(); // 设置介绍的步骤 driver.defineSteps([ { element: '#first-element-introduction', popover: { className: 'first-step-popover-class', title: 'Title on Popover', description: 'Body of the popover', position: 'left' } }, { element: '#second-element-introduction', popover: { title: 'Title on Popover', description: 'Body of the popover', position: 'top' } }, { element: '#third-element-introduction', popover: { title: 'Title on Popover', description: 'Body of the popover', position: 'right' } }, ]); // 开始分步引导介绍 driver.start(); |
以上是雷雪松对Driver.js的讲解。是不是很简单，很炫酷？赶紧用起来吧，让你的用户在使用你的产品时，更快更好的上手吧！