当前位置：首页 > VUE

vue 实现引导页面

2026-02-18 22:08:00VUE

Vue 实现引导页面的方法

使用 vue-tour 插件

安装 vue-tour 插件：

npm install vue-tour

在 main.js 中引入并注册：

import Vue from 'vue'
import VueTour from 'vue-tour'

Vue.use(VueTour)
require('vue-tour/dist/vue-tour.css')

在组件中使用：

vue 实现引导页面

<template>
  <div>
    <v-tour name="myTour" :steps="steps"></v-tour>
    <button @click="$tours['myTour'].start()">Start Tour</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      steps: [
        {
          target: '#element1',
          content: 'This is the first step'
        },
        {
          target: '#element2',
          content: 'This is the second step'
        }
      ]
    }
  }
}
</script>

使用 driver.js 库

安装 driver.js：

npm install driver.js

在组件中使用：

vue 实现引导页面

<template>
  <div>
    <button @click="startTour">Start Tour</button>
  </div>
</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: '#element1',
          popover: {
            title: 'Title',
            description: 'Description',
            position: 'bottom'
          }
        },
        {
          element: '#element2',
          popover: {
            title: 'Title',
            description: 'Description',
            position: 'top'
          }
        }
      ])
      driver.start()
    }
  }
}
</script>

自定义实现引导页面

创建引导组件：

<template>
  <div v-if="isActive" class="tour-overlay">
    <div class="tour-step" :style="stepStyle">
      <div class="tour-content">
        <h3>{{ currentStep.title }}</h3>
        <p>{{ currentStep.content }}</p>
        <button @click="nextStep">Next</button>
      </div>
    </div>
  </div>
</template>

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

<style>
.tour-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.tour-step {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}
.tour-content {
  position: absolute;
  background: white;
  padding: 20px;
  border-radius: 5px;
}
</style>

在父组件中使用：

<template>
  <div>
    <Tour :steps="steps" :isActive="isTourActive" @complete="isTourActive = false" />
    <button @click="isTourActive = true">Start Tour</button>
  </div>
</template>

<script>
import Tour from './Tour.vue'

export default {
  components: { Tour },
  data() {
    return {
      isTourActive: false,
      steps: [
        {
          target: '#element1',
          title: 'Step 1',
          content: 'This is the first step'
        },
        {
          target: '#element2',
          title: 'Step 2',
          content: 'This is the second step'
        }
      ]
    }
  }
}
</script>