Vue 新手引导标签

红太狼 2022-11-11 05:26 176阅读 0赞

### **安装 ** ###

npm install driver.js --save

## 代码 ##

### 1、存放每一步的提示信息   **utils - driver.js** ###

export default [
        {
            element: '#some-element1',
            popover: {
              title: '第一项',
              description: '第一项的描述',
              position: 'bottom',
            }
        },
        {
            element: '#some-element2',
            popover: {
              title: '第二项',
              description: '第二项的描述',
              position: 'top',
            }
        },
    ]

### 2、挂载实例对象   **main.js** ###

import Driver from 'driver.js'
    import 'driver.js/dist/driver.min.css'
    import Vue from 'vue'
    Vue.prototype.$driver = new Driver()

### 自定义提示语配置 ###

import Driver from 'driver.js';
    import 'driver.js/dist/driver.min.css'
    import Vue from 'vue'
    Vue.prototype.$driver = new Driver({  
      doneBtnText: '完成',              // Text on the final button
      closeBtnText: '关闭',            // Text on the close button for this step
      stageBackground: 'salmon',       // Background color for the staged behind highlighted element
      nextBtnText: '下一步',              // Next button text for this step
      prevBtnText: '上一步',          // Previous button text for this step
    })

### 3、在页面中使用 ###

import driverStep from "@/utils/driver"

// 在mounted生命周期或方法中执行下述代码
    this.$driver.defineSteps(driverStep)
    this.$driver.start()

// 方法
    start () {
      this.$nextTick(() => {
        this.$driver.defineSteps(driverStep)
        this.$driver.start()
      })
    }

## 问题 ##

**1、当要高亮的元素的父级或父辈级的样式为固定定位`fixed`时，高亮显示不出内容。需要将固定定位改为绝对定位`absolute`。**