当前位置：首页 > VUE

vue实现引导

2026-02-10 01:49:20VUE

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: 'right'
        }
      }
    ]);
    driver.start();
  }
};

自定义引导组件

如果需要更灵活的引导功能，可以自定义一个引导组件。

创建 Guide.vue 组件：

<template>
  <div v-if="visible" class="guide-overlay">
    <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: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      currentIndex: 0,
      visible: false
    };
  },
  computed: {
    currentStep() {
      return this.steps[this.currentIndex];
    },
    popoverStyle() {
      const element = document.querySelector(this.currentStep.element);
      if (element) {
        const rect = element.getBoundingClientRect();
        return {
          top: `${rect.bottom}px`,
          left: `${rect.left}px`
        };
      }
      return {};
    }
  },
  methods: {
    start() {
      this.visible = true;
    },
    nextStep() {
      if (this.currentIndex < this.steps.length - 1) {
        this.currentIndex++;
      } else {
        this.visible = false;
      }
    }
  }
};
</script>

<style>
.guide-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.guide-popover {
  position: absolute;
  background: white;
  padding: 16px;
  border-radius: 4px;
  max-width: 300px;
}
</style>

在父组件中使用：

<template>
  <div>
    <button id="step1" @click="startGuide">开始引导</button>
    <div id="step2">这是第二步的目标元素</div>
    <Guide ref="guide" :steps="steps" />
  </div>
</template>

<script>
import Guide from './Guide.vue';

export default {
  components: { Guide },
  data() {
    return {
      steps: [
        {
          element: '#step1',
          title: '第一步',
          description: '点击按钮开始引导'
        },
        {
          element: '#step2',
          title: '第二步',
          description: '这是第二步的引导内容'
        }
      ]
    };
  },
  methods: {
    startGuide() {
      this.$refs.guide.start();
    }
  }
};
</script>

使用 Vue Tour

Vue Tour 是一个专门为 Vue 设计的引导库，功能丰富且易于使用。

安装 Vue Tour：

npm install vue-tour

在 main.js 中引入：

import Vue from 'vue';
import VueTour from 'vue-tour';
import 'vue-tour/dist/vue-tour.css';

Vue.use(VueTour);

在组件中使用：

vue实现引导

<template>
  <div>
    <button v-tour:myTour="'step1'">开始引导</button>
    <div v-tour:myTour="'step2'">这是第二步的目标元素</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      steps: [
        {
          target: '[v-tour="step1"]',
          content: '这是第一步的引导内容'
        },
        {
          target: '[v-tour="step2"]',
          content: '这是第二步的引导内容'
        }
      ]
    };
  },
  mounted() {
    this.$tours['myTour'].start();
  }
};
</script>