Driver.js的使用

国际惯例 先上此贴实现功能预览图

image-20210108112057583[12]

Driver.js是一个用于凸显页面的某一部分的插件

安装Driver.js

1 yarn add driver.js
2 npm install driver.js

在页面中导入driver.js

 import Driver from 'driver.js' // import driver.js
 import 'driver.js/dist/driver.min.css' // import driver.js css

 

定义导航的数据

    
1  data() {
2        return {
3          driver: null
4       }
5     }

 

实例化Driver

 1  mounted() {
 2        this.driver = new Driver({
 3          opacity: 0.1,
 4          animate: true,
 5          doneBtnText: '我知道了',
 6          closeBtnText: '跳过', //  关闭按钮文案
 7          nextBtnText: '下一步', // 下一步的按钮文案
 8          prevBtnText: '上一步', // 上一步的按钮文案
 9       })
10     },

 

定义一个方法触发引导

1  guide() {
2          this.driver.defineSteps(steps)
3          this.driver.start()
4       }

 

其中的steps资源文件

 1  const steps = [
 2   {
 3      element: '#hamburger-container',
 4      popover: {
 5        title: '侧边栏按钮',
 6        description: '打开或者关闭侧边栏',
 7        position: 'bottom'
 8     }
 9   },
10   {
11      element: '#breadcrumb-container',
12      popover: {
13        title: 'Breadcrumb',
14        description: 'Indicate the current page location',
15        position: 'bottom'
16     }
17   }
18  ]
19  export default steps

 

posted @ 2021-01-08 12:27  mengjie1998  阅读(4156)  评论(0)    收藏  举报