vue实现引导页

实现引导页的基本思路

引导页通常用于首次访问用户或新功能展示，通过高亮、蒙层、提示框等方式引导用户操作。Vue中可通过第三方库或自定义指令实现。

使用driver.js库

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

安装依赖：

npm install driver.js

组件中使用：

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

export default {
  mounted() {
    const driver = new Driver({
      animate: true,
      opacity: 0.7,
      doneBtnText: '完成',
      closeBtnText: '关闭',
      nextBtnText: '下一步',
      prevBtnText: '上一步'
    })

    driver.defineSteps([
      {
        element: '#step1',
        popover: {
          title: '标题1',
          description: '内容描述1',
          position: 'bottom'
        }
      },
      {
        element: '#step2',
        popover: {
          title: '标题2',
          description: '内容描述2',
          position: 'left'
        }
      }
    ])

    driver.start()
  }
}

自定义Vue指令实现

创建自定义指令v-tour：

Vue.directive('tour', {
  bind(el, binding) {
    el.classList.add('tour-step')
    el.dataset.tourTitle = binding.value.title
    el.dataset.tourContent = binding.value.content
  }
})

添加全局样式：

.tour-step {
  position: relative;
  z-index: 9999;
}

.tour-highlight {
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
  position: relative;
  z-index: 10000;
}

实现引导逻辑：

const tour = {
  steps: [],
  currentStep: 0,
  start() {
    this.showStep(0)
  },
  showStep(index) {
    const step = this.steps[index]
    const el = document.querySelector(step.selector)

    // 添加高亮效果
    el.classList.add('tour-highlight')

    // 创建提示框
    const tooltip = this.createTooltip(step)
    document.body.appendChild(tooltip)
  }
}

引导页状态管理

使用Vuex存储引导状态：

const store = new Vuex.Store({
  state: {
    tourCompleted: false
  },
  mutations: {
    completeTour(state) {
      state.tourCompleted = true
    }
  }
})

组件中检查状态：

computed: {
  shouldShowTour() {
    return !this.$store.state.tourCompleted
  }
}

响应式引导页

根据屏幕尺寸调整引导内容：

methods: {
  getTourSteps() {
    return window.innerWidth < 768 ? 
      mobileSteps : 
      desktopSteps
  }
}

引导页动画效果

添加过渡动画：

.tour-step-enter-active, .tour-step-leave-active {
  transition: all 0.5s;
}
.tour-step-enter, .tour-step-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

引导页本地存储

使用localStorage记录完成状态：

if (!localStorage.getItem('tourShown')) {
  startTour()
  localStorage.setItem('tourShown', 'true')
}