当前位置：首页 > VUE

vue实现引导页

2026-02-17 04:26:01VUE

Vue 实现引导页的方法

使用第三方库（推荐）

Vue 社区提供了多个专门用于实现引导页的库，例如 driver.js 或 vue-tour。这些库功能完善，支持高亮元素、步骤导航和自定义样式。

安装 driver.js：

npm install driver.js

示例代码：

<template>
  <div>
    <button @click="startTour">开始引导</button>
    <div id="step1">第一步目标元素</div>
    <div id="step2">第二步目标元素</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.highlight({
        element: '#step1',
        popover: {
          title: '第一步',
          description: '这是第一步的说明',
        },
      });
      driver.highlight({
        element: '#step2',
        popover: {
          title: '第二步',
          description: '这是第二步的说明',
        },
      });
    },
  },
};
</script>

自定义实现

如果需要更简单的引导页，可以通过 Vue 的条件渲染和动态样式实现。

示例代码：

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

<script>
export default {
  data() {
    return {
      currentStep: 1,
    };
  },
  methods: {
    nextStep() {
      this.currentStep++;
    },
  },
};
</script>

<style>
.guide-step {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 9999;
}
</style>

结合路由实现多页面引导

如果引导页涉及多个路由页面，可以通过 Vue Router 的导航守卫和状态管理（如 Vuex）实现。

示例代码：

<template>
  <div>
    <router-view />
    <div v-if="showGuide" class="guide-overlay">
      <div>引导内容</div>
      <button @click="closeGuide">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showGuide: true,
    };
  },
  methods: {
    closeGuide() {
      this.showGuide = false;
    },
  },
};
</script>