vue实现引导页面

实现引导页面的方法

使用Vue实现引导页面通常需要结合路由和组件化思想，以下是几种常见实现方式：

使用vue-tour插件

安装vue-tour插件：

npm install vue-tour

在main.js中引入：

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

Vue.use(VueTour)
require('vue-tour/dist/vue-tour.css')

在组件中使用：

<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>
  <div>
    <button @click="startTour">开始引导</button>
  </div>
</template>

<script>
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'

export default {
  methods: {
    startTour() {
      const driver = new Driver()
      driver.defineSteps([
        {
          element: '#element1',
          popover: {
            title: '标题1',
            description: '内容1',
            position: 'bottom'
          }
        },
        {
          element: '.element2',
          popover: {
            title: '标题2',
            description: '内容2',
            position: 'left'
          }
        }
      ])
      driver.start()
    }
  }
}
</script>

自定义引导组件

创建可复用的引导组件：

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

<script>
export default {
  props: {
    steps: Array
  },
  data() {
    return {
      active: false,
      currentIndex: 0
    }
  },
  computed: {
    currentStep() {
      return this.steps[this.currentIndex]
    },
    highlightStyle() {
      const el = document.querySelector(this.currentStep.target)
      if (!el) return {}
      const rect = el.getBoundingClientRect()
      return {
        top: `${rect.top}px`,
        left: `${rect.left}px`,
        width: `${rect.width}px`,
        height: `${rect.height}px`
      }
    },
    contentStyle() {
      const el = document.querySelector(this.currentStep.target)
      if (!el) return {}
      const rect = el.getBoundingClientRect()
      return {
        top: `${rect.bottom + 10}px`,
        left: `${rect.left}px`
      }
    }
  },
  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-highlight {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.5), 0 0 0 2px #fff;
}
.guide-content {
  position: absolute;
  background: white;
  padding: 20px;
  border-radius: 4px;
  max-width: 300px;
}
</style>

结合路由的引导流程

在路由守卫中控制引导显示：

const router = new VueRouter({
  routes: [...]
})

router.beforeEach((to, from, next) => {
  if (to.meta.requiresTour && !localStorage.getItem('tourCompleted')) {
    next({ path: '/tour', query: { redirect: to.fullPath } })
  } else {
    next()
  }
})

创建引导页面组件：

<template>
  <div>
    <tour-component :steps="tourSteps" @complete="completeTour"></tour-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tourSteps: [...]
    }
  },
  methods: {
    completeTour() {
      localStorage.setItem('tourCompleted', 'true')
      this.$router.push(this.$route.query.redirect || '/')
    }
  }
}
</script>

以上方法可根据具体需求选择或组合使用，vue-tour和driver.js提供了开箱即用的解决方案，而自定义组件则提供了更大的灵活性。