vue 实现引导页

实现引导页的基本思路

Vue实现引导页通常涉及高亮页面元素、添加提示信息以及控制引导流程。可以通过自定义指令、组件或第三方库完成。

使用第三方库driver.js

driver.js是一个轻量级、无依赖的引导库，适合Vue项目集成。

安装driver.js：

npm install driver.js

在Vue组件中使用：

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

export default {
  mounted() {
    const driver = new Driver();
    driver.defineSteps([
      {
        element: '#step1',
        popover: {
          title: '第一步',
          description: '这是第一个引导步骤',
          position: 'bottom'
        }
      },
      {
        element: '#step2',
        popover: {
          title: '第二步',
          description: '这是第二个引导步骤',
          position: 'left'
        }
      }
    ]);
    driver.start();
  }
}

自定义引导组件

创建一个可复用的引导组件：

<template>
  <div v-if="active" class="guide-overlay">
    <div class="guide-highlight" :style="highlightStyle"></div>
    <div class="guide-popover" :style="popoverStyle">
      <h3>{{ currentStep.title }}</h3>
      <p>{{ currentStep.description }}</p>
      <button @click="nextStep">下一步</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    steps: Array,
    initialStep: { type: Number, default: 0 }
  },
  data() {
    return {
      active: false,
      currentStepIndex: this.initialStep
    }
  },
  computed: {
    currentStep() {
      return this.steps[this.currentStepIndex]
    },
    highlightStyle() {
      const el = document.querySelector(this.currentStep.element)
      if (!el) return {}
      const rect = el.getBoundingClientRect()
      return {
        width: `${rect.width}px`,
        height: `${rect.height}px`,
        top: `${rect.top}px`,
        left: `${rect.left}px`
      }
    }
  },
  methods: {
    start() {
      this.active = true
    },
    nextStep() {
      if (this.currentStepIndex < this.steps.length - 1) {
        this.currentStepIndex++
      } else {
        this.active = false
      }
    }
  }
}
</script>

<style>
.guide-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom:  0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
}
.guide-highlight {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
}
.guide-popover {
  position: absolute;
  background: white;
  padding: 20px;
  border-radius: 5px;
  max-width: 300px;
}
</style>

实现引导页的注意事项

确保引导元素在DOM中已渲染完成后再启动引导，可在mounted钩子或$nextTick中调用引导逻辑。

引导步骤数据应包含目标元素选择器和提示信息：

steps: [
  {
    element: '#header',
    title: '网站标题',
    description: '这里是网站的主标题区域'
  },
  {
    element: '.main-menu',
    title: '主导航',
    description: '从这里可以访问主要功能'
  }
]

对于复杂应用，建议将引导状态保存到Vuex或localStorage，避免重复显示给用户。