Vue+Driverjs做用户引导页面

简单的demo练习，有更好的引导方案望指正

一、安装

1.无论你喜欢哪种方式，你都可以使用 yarn 或 npm 进行安装。

yarn add driver.js
npm install driver.js

2.或者直接在文件中引入它。

<link rel="stylesheet" href="/dist/driver.min.css">
<script src="/dist/driver.min.js"></script>

二、引入

我是通过npm安装的，所有在需要用到引导的页面引入·Driver

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

三、加选择器。

HTML 给需要突出的元素动态添加class或id

<template>
  <div id="list">
    <div
      v-for="(item, index) in listData"
      :key="index"
      :class="item.name"
      class="item"
    >
      <span class="icon">
        <van-icon :name="item.name" />
      </span>
      <div class="info">{{ item.info }}</div>
    </div>
  </div>
</template>

四、js封装

在方法methods中封装代码

   driverD () {
      const driver = new Driver({
        allowClose: false,
        doneBtnText: '完成', // 结束按钮的文字
        stageBackground: '#ffffff', // 突出显示元素的背景颜色
        nextBtnText: '下一步', // 下一步按钮的文字
        prevBtnText: '上一步', // 上一步按钮的文字
        closeBtnText: '关闭', // 关闭按钮的文字
        onHighlightStarted: (Element) => { }, // 元素即将突出显示时调用
        onHighlighted: (Element) => {
          console.log(Element)
        }, // 元素完全突出显示时调用
        onDeselected: (Element) => { }, // 取消选择元素时调用
        onReset: (Element) => { }, // 当要清除叠加时调用
        onNext: (Element) => { }, // 在任何步骤中移动到下一步时调用
        onPrevious: (Element) => { }// 在任何步骤中移动到上一步时调用
      })
      const steps = [
        {
          element: '.chat-o',//传递选择器即可突出显示单个元素
          popover: {
            title: '这是按钮1',
            description: '按钮1-测试',
            position: 'top-center' // 可选 `top`, `left`, `right`, `bottom`
          }
        },
        {
          element: '.like-o',
          popover: {
            title: '这是按钮1',
            description: '按钮1-测试',
            position: 'bottom-center'// 可选 `top`, `left`, `right`, `bottom`
          }
        },
        {
          element: '.service-o',
          popover: {
            title: '这是按钮1',
            description: '按钮1-测试',
            position: 'bottom' // 可选 `top`, `left`, `right`, `bottom`
          }
        },
        {
          element: '.location-o',
          popover: {
            title: '这是按钮1',
            description: '按钮1-测试',
            position: 'bottom' // 可选 `top`, `left`, `right`, `bottom`
          }
        },
        {
          element: '.vip-card-o',
          popover: {
            title: '这是按钮1',
            description: '按钮1-测试',
            position: 'bottom' // 可选 `top`, `left`, `right`, `bottom`
          }
        },
        {
          element: '.friends-o',
          popover: {
            title: '这是按钮1',
            description: '按钮1-测试',
            position: 'bottom' // 可选 `top`, `left`, `right`, `bottom`
          }
        }
      ]
      driver.defineSteps(steps)
      driver.start()
    }

五、使用

在mounted挂载是判断是否需要展示引导组件

 if (this.isShowGuide) {
      this.driverD()
    } else {
      // to do不需要引导，其他操作
    }

六、样式优化

对于某些特殊需求：比如引导设置为强制引导，用户不可跳过，driverjs目前并没有提供隐藏“关闭”、“上一步”、“下一步”的属性。只能改相应的class了，查到该关闭按钮的class为driver-close-btn，可设置如下：

<style>
[class*='driver-close-btn'] {
  visibility: hidden;
}
[class*='driver-prev-btn'] {
  visibility: hidden;
}
div#driver-popover-item .driver-popover-footer button {
  background-color: #1890ff;
  color: white;
  text-shadow: none; /* 取消原来的text阴影，不然会有文字重叠的感觉 */
  border: none; /* 取消原来它自己按钮设置的border */
  line-height: 1.8;
  border-radius: 4px;
}

div#driver-popover-item .driver-popover-footer button:hover {
  background-color: #50abff;
}

div#driver-popover-item .driver-popover-footer button:active {
  background-color: #1269ba;
}
</style>