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')
}
