当前位置：首页 > VUE

vue实现引导多步功能

2026-02-23 00:54:58VUE

Vue 实现引导多步功能

使用第三方库（如 driver.js）

安装 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.highlight({
      element: '#step1',
      popover: {
        title: '第一步',
        description: '这是第一步引导内容'
      }
    });
  }
}

定义多步骤引导：

vue实现引导多步功能

const steps = [
  { element: '#step1', popover: { title: '标题1', description: '内容1' } },
  { element: '#step2', popover: { title: '标题2', description: '内容2' } }
];

driver.defineSteps(steps);
driver.start();

自定义实现引导组件

创建引导组件：

<template>
  <div class="guide-overlay" v-if="active">
    <div class="guide-step" :style="stepStyle">
      <div class="guide-content">
        <h3>{{ currentStep.title }}</h3>
        <p>{{ currentStep.content }}</p>
        <button @click="nextStep">下一步</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    steps: Array,
    initialStep: { type: Number, default: 0 }
  },
  data() {
    return {
      active: false,
      currentIndex: this.initialStep
    };
  },
  computed: {
    currentStep() {
      return this.steps[this.currentIndex];
    },
    stepStyle() {
      const el = document.querySelector(this.currentStep.selector);
      if (el) {
        const rect = el.getBoundingClientRect();
        return {
          top: `${rect.top}px`,
          left: `${rect.left}px`,
          width: `${rect.width}px`,
          height: `${rect.height}px`
        };
      }
      return {};
    }
  },
  methods: {
    start() {
      this.active = true;
    },
    nextStep() {
      if (this.currentIndex < this.steps.length - 1) {
        this.currentIndex++;
      } 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-step {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
}
</style>

使用自定义组件：

vue实现引导多步功能

<template>
  <div>
    <button id="btn1">按钮1</button>
    <input id="input1" placeholder="输入框">

    <Guide :steps="steps" ref="guide" />
    <button @click="startGuide">开始引导</button>
  </div>
</template>

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

export default {
  components: { Guide },
  data() {
    return {
      steps: [
        { selector: '#btn1', title: '按钮引导', content: '这是主要功能按钮' },
        { selector: '#input1', title: '输入引导', content: '在这里输入内容' }
      ]
    };
  },
  methods: {
    startGuide() {
      this.$refs.guide.start();
    }
  }
};
</script>

使用 Vue Tour 库

安装 vue-tour 库：

npm install vue-tour

全局注册：

import Vue from 'vue';
import VueTour from 'vue-tour';

Vue.use(VueTour);

在组件中使用：

<template>
  <div>
    <v-tour name="myTour" :steps="steps"></v-tour>
    <button @click="$tours['myTour'].start()">开始引导</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      steps: [
        {
          target: '#step1',
          content: '这是第一步引导内容'
        },
        {
          target: '#step2',
          content: '这是第二步引导内容'
        }
      ]
    };
  }
};
</script>