vue实现引导页

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')

在组件中使用：

<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

在组件中使用：

<template>
  <div>
    <button @click="startTour">Start Tour</button>
    <div id="step1">Element 1</div>
    <div class="step2">Element 2</div>
  </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: '#step1',
          popover: {
            title: 'Step 1',
            description: 'This is the first step',
            position: 'bottom'
          }
        },
        {
          element: '.step2',
          popover: {
            title: 'Step 2',
            description: 'This is the second step',
            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>

使用 v-tour 组件

在父组件中使用自定义引导组件：

<template>
  <div>
    <button @click="startTour">Start Tour</button>
    <custom-tour 
      :steps="steps" 
      :is-active="isTourActive"
      @complete="isTourActive = false"
    />
    <div id="feature1">Feature 1</div>
    <div class="feature2">Feature 2</div>
  </div>
</template>

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

export default {
  components: {
    CustomTour
  },
  data() {
    return {
      isTourActive: false,
      steps: [
        {
          target: '#feature1',
          title: 'Feature 1',
          content: 'This is the first feature'
        },
        {
          target: '.feature2',
          title: 'Feature 2',
          content: 'This is the second feature'
        }
      ]
    }
  },
  methods: {
    startTour() {
      this.isTourActive = true
    }
  }
}
</script>

以上方法提供了从简单到复杂的多种实现方式，可以根据项目需求选择合适的方案。插件方案更快速便捷，自定义方案则更灵活可控。