方式一 driver.js

安装

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、在页面中使用

<div id="some-element1">第一个</div>
<div id="some-element2">第二个</div>

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。

方式二 手动实现

因为需求需要同时高亮两个地方，并且UI的样式与插件不同。所以最后决定手动实现。
说下思路，先不贴代码了。
在最外层实现一个遮罩，通过vuex来控制遮罩的显示与隐藏。遮罩内部通过定位来实现每个步骤，同样通过vuex来控制显示与隐藏。每一步都改变公共变量来切换下一步。

文档

github
demo演示

网站导航

网站导航