vue 实现引导页

使用 vue-tour 插件实现引导页

vue-tour 是一个轻量级的 Vue.js 引导页插件，可以快速实现用户引导功能。

安装依赖：

npm install vue-tour

在 main.js 中引入：

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: '#element1',
          content: '这是第一个引导步骤'
        },
        {
          target: '.element2',
          content: '这是第二个引导步骤'
        }
      ]
    }
  },
  mounted() {
    this.$tours['myTour'].start()
  }
}
</script>

使用 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({
        doneBtnText: '完成',
        closeBtnText: '关闭',
        nextBtnText: '下一步',
        prevBtnText: '上一步'
      })

      driver.defineSteps([
        {
          element: '#feature1',
          popover: {
            title: '功能一',
            description: '这是第一个功能说明',
            position: 'bottom'
          }
        },
        {
          element: '.feature2',
          popover: {
            title: '功能二',
            description: '这是第二个功能说明',
            position: 'top'
          }
        }
      ])

      driver.start()
    }
  }
}
</script>

使用原生 Vue 实现简单引导页

对于简单需求，可以不依赖第三方库，直接使用 Vue 实现。

<template>
  <div>
    <div v-if="currentStep === 1" class="tour-step">
      <div class="tour-content">第一步引导内容</div>
      <button @click="nextStep">下一步</button>
    </div>

    <div v-if="currentStep === 2" class="tour-step">
      <div class="tour-content">第二步引导内容</div>
      <button @click="nextStep">下一步</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 1,
      totalSteps: 3
    }
  },
  methods: {
    nextStep() {
      if (this.currentStep < this.totalSteps) {
        this.currentStep++
      } else {
        this.finishTour()
      }
    },
    finishTour() {
      // 引导完成后的处理
    }
  },
  mounted() {
    this.startTour()
  }
}
</script>

<style>
.tour-step {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
}
.tour-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  max-width: 400px;
  margin: 100px auto;
}
</style>

引导页最佳实践

确保引导内容简洁明了，每个步骤只聚焦一个功能点

使用高亮效果突出显示被引导的元素，可以通过添加CSS类实现

提供跳过和进度显示功能，让用户知道引导的进度

在本地存储中记录用户是否已完成引导，避免重复显示

考虑响应式设计，确保引导在不同设备上都能正常显示

// 示例：使用localStorage记录引导状态
if (!localStorage.getItem('tourCompleted')) {
  this.startTour()
}