当前位置：首页 > VUE

vue 实现引导页

2026-03-30 01:27:34VUE

使用Vue实现引导页的方法

使用第三方库vue-tour

安装vue-tour库：

npm install vue-tour

在main.js中引入并注册：

vue 实现引导页

import Vue from 'vue'
import VueTour from 'vue-tour'
import 'vue-tour/dist/vue-tour.css'

Vue.use(VueTour)

在组件中使用：

<template>
  <v-tour name="myTour" :steps="steps"></v-tour>
</template>

<script>
export default {
  data() {
    return {
      steps: [
        {
          target: '#step1',
          content: '这是第一步的说明'
        },
        {
          target: '.step2',
          content: '这是第二步的说明'
        }
      ]
    }
  },
  mounted() {
    this.$tours['myTour'].start()
  }
}
</script>

自定义实现引导页

创建引导组件：

vue 实现引导页

<template>
  <div class="guide-overlay" v-if="isShow">
    <div class="guide-mask"></div>
    <div class="guide-content" :style="contentStyle">
      <div class="guide-text">{{ currentStep.text }}</div>
      <button @click="nextStep">下一步</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    steps: Array,
    isShow: Boolean
  },
  data() {
    return {
      currentIndex: 0
    }
  },
  computed: {
    currentStep() {
      return this.steps[this.currentIndex]
    },
    contentStyle() {
      const target = document.querySelector(this.currentStep.target)
      if (target) {
        const rect = target.getBoundingClientRect()
        return {
          top: `${rect.top}px`,
          left: `${rect.left}px`
        }
      }
      return {}
    }
  },
  methods: {
    nextStep() {
      if (this.currentIndex < this.steps.length - 1) {
        this.currentIndex++
      } else {
        this.$emit('close')
      }
    }
  }
}
</script>

<style>
.guide-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.guide-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}
.guide-content {
  position: absolute;
  background: white;
  padding: 10px;
  border-radius: 4px;
}
</style>

使用Driver.js库

安装Driver.js：

npm install driver.js

在组件中使用：

<template>
  <button @click="startTour">开始引导</button>
</template>

<script>
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'

export default {
  methods: {
    startTour() {
      const driver = new Driver()
      driver.defineSteps([
        {
          element: '#step1',
          popover: {
            title: '第一步',
            description: '这是第一步的说明',
            position: 'bottom'
          }
        },
        {
          element: '.step2',
          popover: {
            title: '第二步',
            description: '这是第二步的说明',
            position: 'top'
          }
        }
      ])
      driver.start()
    }
  }
}
</script>