vue使用driver.js完成页面引导的功能

需求：用户首次进入的时候肯定不知道一些功能是干什么在哪里，之后给用户一个页面引导，教他怎么做。

点击插件driver.js官方文档

效果：

 1.下载driverjs

我默认下载的是最新版 "driver.js": "^1.0.5",，其他的低版本可能导入和使用方式不一样哈，别下错了

npm install driver

2.导入

这个包比较小，只有18k

import { driver } from 'driver.js';
import 'driver.js/dist/driver.css';

3.写几个需要向导的div内容，并且设置id值，用于锁定

 

                
第一步
                
巴拉巴拉
            
                 
                 

                
第二步
                
巴拉巴拉
            
            

                
第三部
                
结束
            

4.引导的内容和定位

每一个元素代表的是每一步

element:用户绑定需要向导的div中id的值，也可以用.类名，或者div，为了准确性最好还是用id值绑定，优先级高点

steps: [
                {
                    element: '#some-element',
                    popover: {
                        title: 'Animated Tour Example',
                        description: "Here is the code example showing animated tour. Let's walk you through it.",
                        side: 'right',//弹窗在元素的位置
                        align: 'start'
                    }
                },
                {
                    element: '#step-item-3',
                    popover: {
                        title: 'Import the Library',
                        description: 'It works the same in vanilla JavaScript as well as frameworks.',
                        side: 'left',
                        align: 'start'
                    }
                },
                {
                    element: '#step-item-4',
                    popover: {
                        title: 'Importing CSS',
                        description: 'Import the CSS which gives you the default styling for popover and overlay.',
                        side: 'bottom',
                        align: 'start'
                    }
                },
                {
                    popover: {
                        title: 'Happy Coding',
                        description: 'And that is all, go ahead and start adding tours to your applications.'
                    }
                }
            ]

5.点击按钮后开始绑定

   const driverObj = driver({
                showProgress: true,
                steps: this.steps
            });
            driverObj.drive();
        }

6.完整代码

文章到此结束，希望对你有所帮助~