vue 使用 driver.js 页面分步引导

最新推荐文章于 2023-07-20 16:59:18 发布

前端小白۞

最新推荐文章于 2023-07-20 16:59:18 发布

阅读量1.2k

点赞数 2

分类专栏：大前端工具类文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/zzzz121380/article/details/126480101

版权

大前端同时被 2 个专栏收录

55 篇文章 6 订阅

订阅专栏

工具类

3 篇文章 0 订阅

订阅专栏

1、效果图

在这里插入图片描述

2、实现步骤

（1）安装 driver.js

npm install driver.js --save

（2）在页面引入

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

（3）html添加触发的按钮，调用guide方法

<Button type="primary" icon="md-help" @click.prevent.stop="guide">帮助</Button>

（4）html添加几个带有class或者id的元素

<div style="margin-top: 20px">
      <div class="a" style="width: 100px;height: 100px;background-color: #42b983;margin-left: 600px"></div>
      <div id="b" style="width: 100px;height: 100px;background-color: #4093ff;margin-left: 600px"></div>
      <div class="c" style="width: 100px;height: 100px;background-color: #2c3e50;margin-left: 600px"></div>
      <div id="d" style="width: 100px;height: 100px;background-color: #555555;margin-left: 600px"></div>
    </div>

（5）data中设置包含上面4个元素的属性steps(任意名字即可)

 data(){
    return{
      driver: null,
      steps: [
        {
          element: '.a',
          popover: {
            title: 'a',
            description: 'a',
            position: 'right'
          }
        },
        {
          element: '#b',
          popover: {
            title: 'b',
            description: 'b',
            position: 'right'
          }
        },
        {
          element: '.c',
          popover: {
            title: 'c',
            description: 'c',
            position: 'left'
          }
        },
        {
          element: '#d',
          popover: {
            title: 'd',
            description: 'd',
            position: 'left'
          }
        },

      ]
    }
  },

（6）按钮点击调用的方法

  methods: {
    guide() {
      this.driver.defineSteps(this.steps)
      this.driver.start()
    }
  }

（7）mounted加载

 mounted() {
    this.driver = new Driver()
  },

完整代码

<template>
  <div class="home">
    <Button type="primary" icon="md-help" @click.prevent.stop="guide" class="buttonTailStyle">帮助</Button>
    <div style="margin-top: 20px">
      <div class="a" style="width: 100px;height: 100px;background-color: #42b983;margin-left: 600px"></div>
      <div id="b" style="width: 100px;height: 100px;background-color: #4093ff;margin-left: 600px"></div>
      <div class="c" style="width: 100px;height: 100px;background-color: #2c3e50;margin-left: 600px"></div>
      <div id="d" style="width: 100px;height: 100px;background-color: #555555;margin-left: 600px"></div>
    </div>
  </div>
</template>

<script>
import Driver from 'driver.js' // import driver.js
import 'driver.js/dist/driver.min.css' // import driver.js css
export default {
  name: 'Home',
  data(){
    return{
      driver: null,
      steps: [
        {
          element: '.a',
          popover: {
            title: 'a',
            description: 'a',
            position: 'right'
          }
        },
        {
          element: '#b',
          popover: {
            title: 'b',
            description: 'b',
            position: 'right'
          }
        },
        {
          element: '.c',
          popover: {
            title: 'c',
            description: 'c',
            position: 'left'
          }
        },
        {
          element: '#d',
          popover: {
            title: 'd',
            description: 'd',
            position: 'left'
          }
        },

      ]
    }
  },
  mounted() {
    this.driver = new Driver()
  },
  methods: {
    guide() {
      this.driver.defineSteps(this.steps)
      this.driver.start()
    }
  }
}
</script>