使用 Vue Tour 封装一个统一的页面引导组件
项目开发过程中需要实现用户引导功能，经过调研发现一个好用的 Vue 插件 vue-tour，今天就来分享一下我是如何基于 vue-tour 封装一个统一的引导组件，方便后续在多个页面复用的。
📦 第一步：安装 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)
🧩 第二步：封装统一引导组件
我们希望做到的效果是：不管哪个页面需要引导，只需要引入这个组件，传入 name 和 steps，然后调用 start() 方法即可开启引导。
于是我们封装了一个组件 v-tour-comp.vue，完整代码如下：
<template><div><div v-if="showMask" class="mask"></div><v-tour :name="name" :steps="steps"><template slot-scope="tour"><transition name="fade"><v-stepv-if="tour.steps[tour.currentStep]":key="tour.currentStep":step="tour.steps[tour.currentStep]":previous-step="tour.previousStep":next-step="tour.nextStep":stop="tour.stop":skip="tour.skip":is-first="tour.isFirst":is-last="tour.isLast":labels="tour.labels"><!-- 基于页面需要自定义使用，不用的话可以不需要插槽 --><template #content><slot :tour="tour"></slot></template><template #actions><slot name="action" :tour="tour"></slot></template></v-step></transition></template></v-tour></div>
</template><script>
export default {name: 'v-tour-comp',props: {name: String,steps: Array},data() {return {showMask: false}},created() {this.setStepsBefore()},methods: {setStepsBefore() {// 引导前判断每一步的目标元素是否存在，保证渲染的位置是正确的this.steps.forEach((item) => {item.before = () =>new Promise((resolve, reject) => {const el = document.querySelector(item.target)if (!el) {reject(new Error('找不到元素'))return}resolve()})})},start() {this.showMask = truethis.$tours[this.name]?.start()},stop() {this.showMask = falsethis.$tours[this.name]?.stop()},previousStep() {this.$tours[this.name]?.previousStep()},nextStep() {this.$tours[this.name]?.nextStep()}}
}
</script><style scoped lang="scss">
.mask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 9999;background-color: transparent;
}
</style>
✅ 核心逻辑说明：
- 我们通过
setStepsBefore方法，确保每一步引导的目标 DOM 元素在页面上是存在的； - 对外暴露
start()、stop()等方法，方便外部调用控制； - 使用插槽
<slot>提供自定义内容和操作按钮的能力； - 加一个
mask遮罩层可以让用户更聚焦当前引导区域（当然你可以自定义背景色等样式）。
📌 第三步：在页面中使用
在你需要引导的页面中，只需要这样用：
<template><div><div class="step-1">我是第一步</div><div class="step-2">我是第二步</div><v-tour-comp ref="tour" :name="'guide-demo'" :steps="tourSteps"><template #content="{ tour }"><div>{{ tour.steps[tour.currentStep].content }}</div></template><template #action="{ tour }"><button @click="tour.previousStep" v-if="!tour.isFirst">上一步</button><button @click="tour.nextStep" v-if="!tour.isLast">下一步</button><button @click="tour.stop">结束</button></template></v-tour-comp></div>
</template><script>
import VTourComp from '@/components/v-tour-comp.vue'export default {components: { VTourComp },data() {return {tourSteps: [{target: '.step-1',content: '这是第一步，介绍页面某个功能'},{target: '.step-2',content: '这是第二步，继续讲解另一个部分'}]}},mounted() {// 页面加载后自动触发引导this.$nextTick(() => {this.$refs.tour.start()})}
}
</script>
📚 结语
通过封装这个组件，我们可以在项目中非常方便地添加用户引导，只需要：
- 传入
steps； - 引用组件；
- 调用
start()。
对于提升用户上手效率、降低学习成本、增强产品友好性来说，这样的小工具非常值得一试。如果你也有类似的需求，欢迎试试这个方案～
👉 GitHub 项目地址：vue-tour
如果你觉得这篇文章对你有帮助，欢迎点赞收藏，也欢迎留言交流更多引导类功能的实现方式 😊
相关文章：
使用 Vue Tour 封装一个统一的页面引导组件
项目开发过程中需要实现用户引导功能，经过调研发现一个好用的 Vue 插件 vue-tour，今天就来分享一下我是如何基于 vue-tour 封装一个统一的引导组件，方便后续在多个页面复用的。 📦 第一步：安装 vue-tour 插件 首先安装…...
OpenResty 深度解析：构建高性能 Web 服务的终极方案
引言 openresty是什么？在我个人对它的理解来看相当于嵌入了lua的nginx; 我们在nginx中嵌入lua是为了不需要再重新编译,我们只需要重新修改lua脚本,随后重启即可; 一.lua指令序列 我们分别从初始化阶段，重写/访问阶段，内容阶段，日志…...
赋能企业级移动应用 CFCA FIDO+提升安全与体验
移动办公与移动金融为企业有效提升业务丰富性、执行便捷性。与此同时，“安全”始终是移动办公与移动金融都绕不开的话题。随着信息安全技术的发展，企业级移动应用中安全与便捷不再是两难的抉择。 中金金融认证中心（CFCA）作为经国…...
Redis 数据类型与操作完全指南
Redis 是一个开源的、内存中的数据结构存储系统，它可以用作数据库、缓存和消息中间件。与传统的关系型数据库不同，Redis 提供了丰富的数据类型和灵活的操作方式，这使得它能够高效地解决各种不同场景下的数据存储和处理问题。本文将全面介绍 R…...
ArrayList-集合使用
自动扩容，集合的长度可以变化，而数组长度不变，集合更加灵活。 集合只能存引用数据类型，不能直接存基本数据类型，除非包装 ArrayList会拿[]展示数据...
深入解析Spring Boot与Redis集成：高效缓存实践
深入解析Spring Boot与Redis集成：高效缓存实践 引言 在现代Web应用开发中，缓存技术是提升系统性能的重要手段之一。Redis作为一种高性能的键值存储数据库，广泛应用于缓存、会话管理和消息队列等场景。本文将详细介绍如何在Spring Boot项目中…...
8天Python从入门到精通【itheima】-11~13
目录 11节-PyCharm的安装和基础使用： 1.第三方IDE（集成开发工具） 2.PyCharm的所属——jetbrains公司 3.进入jetbrains的官网，搜索下载【官网自带中文，太友好了，爱你（づ￣3&#x…...
day33-网络编程
1. 网络编程入门 1.1 网络编程概述 计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备，通过通信线路连接起来，在网络操作系统，网络管理软件及网络通信协议的管理和协调下，实现资源共享和信息传递的计算机系统…...
CMake基础及操作笔记
CMake 基础与操作：从入门到精通 前言 CMake 是一个功能强大、跨平台的构建工具，广泛用于 C 项目管理。它通过简洁的配置文件（CMakeLists.txt）描述编译过程，生成适用于不同平台的构建脚本（如 Makefile 或 …...
使用lvm进行磁盘分区
使用lvm进行磁盘分区 目的： 使用/dev/vdb创建一个5g的逻辑卷挂载到/mnt/lvmtest 前提： /dev/vdb是一块干净的空磁盘，数据会被清空！！！ 1. 创建物理卷(PV)： pvcreate /dev/sdb2. 验证…...
Java的线程通信机制是怎样的呢？
核心观点：线程通信本质是状态同步与数据传递的协同控制 （类比测试团队协作：如同测试用例执行需要同步进度，测试数据需要跨线程传递） 一、基础通信机制（附测试验证方法） 1. 共享内存（最常用但最危险） // 测试典型场景：多线程统计测试用例通过率 public class Share…...
线性回归策略
一种基于ATR（平均真实范围）、线性回归和布林带的交易策略。以下是对该策略的全面总结和分析： 交易逻辑思路 1. 过滤条件： - 集合竞价过滤：在每个交易日的开盘阶段，过滤掉集合竞价产生的异常数据。 - 价格异常过滤：排除当天开盘价与最高价或最低价相同的情况，这…...
Sparse4D运行笔记
Sparse4D有三个版本，其中V1和V2版本的官方文档中环境依赖写得比较模糊且依赖库有版本冲突。 1. Sparse4D V1 创建环境 conda create sparse4dv1 python3.8 激活环境 conda activate sparse4dv1 安装torch, torchvision, torchaudio pip install torch1.13.0c…...
Bitmap、Roaring Bitmap、HyperLogLog对比介绍
一、Bitmap（位图）概述 Bitmap 是一种用位（bit）来表示集合元素是否存在的数据结构。每个位代表一个元素的状态（0或1），非常节省空间且支持快速集合操作。 常见Bitmap类型： 普通Bitmap 最简单的位数组，适合元素范围固定且不稀疏的场景。例如，元素范围是0~1000，用1001…...
Rust 数据结构：HashMap
Rust 数据结构：HashMap Rust 数据结构：HashMap创建一个新的哈希映射HashMap::new()将元组变成哈希表 访问哈希映射中的值哈希映射和所有权更新哈希映射重写一个值仅当键不存在时才添加键和值基于旧值更新值 散列函数 Rust 数据结构：HashMap …...
Spring6学习及复习笔记
1、快速入门认识 通过编写xml配置文件来创建对象，读取bean标签的id值和class值来创建。 之后再通过对象调用相关的方法（这里实际上用到的是反射机制） 对象会存放到Map集合中 大致反射思路如下：（这里只是模拟&#x…...
开源语音-文本基础模型和全双工语音对话框架 Moshi 介绍
介绍 一、项目背景 Moshi是一种语音-文本基础模型和全双工语音对话框架。它使用了Mimi这一业界领先的流式神经音频编解码器。Mimi能够以完全流式处理的方式（80毫秒的延迟，即帧大小），将24千赫兹的音频信号压缩为12.5赫兹的表示形式…...
MATLAB学习笔记（六）：MATLAB数学建模
MATLAB 是数学建模的强大工具，其丰富的函数库和可视化能力可以高效解决各类数学建模问题。以下是 MATLAB 数学建模的完整指南，涵盖建模流程、常用方法、代码示例及实际应用。 一、数学建模的基本流程 问题分析 • 明确目标（预测、优化、分类等…...
博客打卡-求解流水线调度
题目如下： 有n个作业（编号为1～n）要在由两台机器M1和M2组成的流水线上完成加工。每个作业加工的顺序都是先在M1上加工，然后在M2上加工。M1和M2加工作业i所需的时间分别为ai和bi（1≤i≤n）。 流水…...
：用户会话管理/文件类型拓展/诸多优化更新)
【Ragflow】22.RagflowPlus(v0.3.0)：用户会话管理/文件类型拓展/诸多优化更新
概述 在历经三周的阶段性开发后，RagflowPlus顺利完成既定计划，正式发布v0.3.0版本。 开源地址：https://github.com/zstar1003/ragflow-plus 新功能 1. 用户会话管理 在后台管理系统中，新增用户会话管理菜单。在此菜单中&…...
深度学习中ONNX格式的模型文件
一、模型部署的核心步骤 模型部署的完整流程通常分为以下阶段，用 “跨国旅行” 类比： 步骤类比解释技术细节1. 训练模型学会一门语言（如中文）用 PyTorch/TensorFlow 训练模型2. 导出为 ONNX翻译成国际通用语言（如英语…...
【机器人】复现 WMNav 具身导航 | 将VLM集成到世界模型中
WMNav 是由VLM视觉语言模型驱动的，基于世界模型的对象目标导航框架。 设计一种预测环境状态的记忆策略，采用在线好奇心价值图来量化存储，目标在世界模型预测的各种场景中出现的可能性。 本文分享WMNav复现和模型推理的过程～ 下…...
C++中析构函数不设为virtual导致内存泄漏示例
一、问题示例 #include <iostream> using namespace std;class Base { public:Base() { cout << "Base constructor\n"; }~Base() { cout << "Base destructor\n"; } // 不是 virtual };class Derived : public Base { public:Derived(…...
UDP--DDR--SFP,FPGA实现之模块梳理及AXI读写DDR读写上板测试
模块梳理介绍 在之前的几篇文章中，笔者详细介绍了整个项目的框架结构以及部分关键模块的实现细节。这些模块包括UDP协议栈、UDP指令监测、数据跨时钟域处理、DDR读写控制、内存读取控制以及DDR AXI控制器等。这些模块共同构成了项目的基础架构，每个模块…...
Slidev集成Chart.js：专业数据可视化演示文稿优化指南
引言：为何选择在Slidev中集成Chart.js？ 在现代演示文稿中，高效的数据可视化对于清晰传达复杂信息至关重要。Slidev是一款灵活的开源演示文稿工具，基于Web技术构建，但在高级数据可视化方面存在一定局限。本文旨在提供一…...
动态规划（3）学习方法论：构建思维模型
引言 动态规划是算法领域中一个强大而优雅的解题方法，但对于许多学习者来说，它也是最难以掌握的算法范式之一。与贪心算法或分治法等直观的算法相比，动态规划往往需要更抽象的思维和更系统的学习方法。在前两篇文章中，我们介绍了动态规划的基础概念、原理以及问题建模与状…...
NDS3211HV单路H.264/HEVC/HD视频编码器
1产品概述 NDS3211HV单路高清编码器是一款功能强大的音/视频编码设备，支持2组立体声，同时还支持CC(CVBS)字幕。支持多种音频编码方式。该设备配备了多种音/视频输入接口：HD-SDI数字视频输入、HDMI高清输入（支持CC）、A…...
GO语言语法---if语句
文章目录 1. 基本语法1.1 单分支1.2 双分支1.3 多分支 2. Go特有的if语句特性2.1 条件前可以包含初始化语句2.2 条件表达式不需要括号2.3 必须使用大括号2.4 判断语句所在行数控制 Go语言的if语句用于条件判断，与其他C风格语言类似，但有一些独特的语法特…...
单细胞转录组（4）Cell Ranger
使用 Cell Ranger 分析单细胞数据 1. 数据转换 BCL2FASTQ 在进行单细胞数据分析之前，需要将 Illumina 测序仪生成的 BCL 格式数据转换为 FASTQ 格式。这一步通常使用 bcl2fastq 软件完成。 1.1 安装 bcl2fastq bcl2fastq 是 Illumina 提供的软件，用于…...
Python爬虫-爬取百度指数之人群兴趣分布数据，进行数据分析
前言 本文是该专栏的第56篇，后面会持续分享python爬虫干货知识，记得关注。 在本专栏之前的文章《Python爬虫-爬取百度指数之需求图谱近一年数据》中，笔者有详细介绍过爬取需求图谱的数据教程。 而本文，笔者将再以百度指数为例子，基于Python爬虫获取指定关键词的人群“兴…...
使用Python和Selenium打造一个全网页截图工具
无论是归档网站、测试页面设计，还是为报告记录网页内容，一个可靠的截图工具都能大大提升效率。本文将介绍如何使用Python、Selenium和wxPython构建一个用户友好的网页截图工具。该工具能在浏览器中显示网页，自动平滑滚动到底部以触发懒加载内…...
自动化脚本开发：Python调用云手机API实现TikTok批量内容发布
在2025年的技术生态下，通过Python实现TikTok批量内容发布的自动化脚本开发需结合云手机API调用、TikTok开放接口及智能调度算法。以下是基于最新技术实践的系统化开发方案： 一、云手机环境配置与API对接 云手机平台选择与API接入 推荐使用比特云手机或丁…...
React Hooks 必须在组件最顶层调用的原因解析
文章目录 前言一、Hooks 的基本概念二、Hooks 的调用规则三、为什么 Hooks 必须在最顶层调用？1. 维护 Hooks 的调用顺序2. 闭包与状态关联3. 实现细节：Hook 的链表结构 四、违反规则的后果五、如何正确使用 Hooks六、示例：正确与错误的用法对…...
西门子 Teamcenter13 Eclipse RCP 开发 1.2 工具栏 开关按钮
西门子 Teamcenter13 Eclipse RCP 开发 1.2 工具栏 开关按钮 1 配置文件2 插件控制3 命令框架 位置locationURI备注菜单栏menu:org.eclipse.ui.main.menu添加到传统菜单工具栏toolbar:org.eclipse.ui.main.toolbar添加到工具栏 style 值含义显示效果push普通按钮（默…...
5.27本日总结
一、英语 复习list2list29 二、数学 学习14讲部分内容 三、408 学习计组1.2内容 四、总结 高数和计网明天结束当前章节，计网内容学完之后主要学习计组和操作系统 五、明日计划 英语：复习lsit3list28，完成07年第二篇阅读 数学&#…...
【持续更新中】架构面试知识学习总结
1.分库分表出现冗余数据： ☆分库分表方法：水平和垂直（业务场景，数据关联性。逻辑要调查清楚） 垂直：将一个表(库)按照列的业务相关性进行拆分，把经常一起使用的列放在一张表(库)&…...
文字溢出省略号显示
一、 单行文字溢出、省略号显示 二、 多行文字溢出，省略号显示 有较大的兼容性问题，适用于Webkit为内核的浏览器软件，或者移动端的（大部分也是webkit） 此效果建议后端人员开发 三、图片底侧空白缝隙的修复技巧&#…...
力扣-283-移动零
1.题目描述 2.题目链接 283. 移动零 - 力扣（LeetCode） 3.题目代码 class Solution {public void moveZeroes(int[] nums) {int dest-1;int cur0;while(cur<nums.length){if(nums[cur]0){cur;}else if(nums[cur]!0){swap(nums,cur,dest1);cur;dest…...
【001】RenPy打包安卓apk 流程源码级别分析
1. 入口在下图 2. SDK版本及代码入口 （renpy-8.3.7-sdk） 由于SDK一直在升级，本文采用 标题中的版本进行分析，整体逻辑变化不太大。 实际执行逻辑是调用的rapt 2.1 点击按钮实际执行逻辑 def AndroidIfState(state, needed, acti…...
机器学习-人与机器生数据的区分模型测试-数据处理 - 续
这里继续 机器学习-人与机器生数据的区分模型测试-数据处理1的内容 查看数据 中1的情况 #查看数据1的分布情况 one_ratio_list [] for col in data.columns:if col city or col target or col city2: # 跳过第一列continueelse:one_ratio data[col].mean() # 计算1值占…...
)
计算机视觉与深度学习 ｜ Python实现EMD-VMD-LSTM时间序列预测（完整源码和数据)
EMD-VMD-LSTM 一、完整代码实现二、代码结构解析三、关键参数说明四、性能优化建议五、工业部署方案以下是用Python实现EMD-VMD-LSTM时间序列预测的完整代码，结合经验模态分解（EMD）、变分模态分解（VMD）与LSTM深度学习模型，适用于复杂非平稳信号的预测任务。代码包含数据生…...
数据结构与算法——双向链表
双向链表 定义链表分类双向链表：带头双向循环链表 初始化打印尾插头插尾删头删查找在pos(指定位置)之后插入结点在pos(指定位置)之前插入结点删除pos(指定位置)的结点销毁顺序表与链表的分析 定义 链表分类 单向和双向 带头和不带头 带头是指存在一个头结点&…...
.NET 中管理 Web API 文档的两种方式
前言 在 .NET 开发中管理 Web API 文档是确保 API 易用性、可维护性和一致性的关键。今天大姚给大家分享两种在 .NET 中管理 Web API 文档的方式，希望可以帮助到有需要的同学。 Swashbuckle Swashbuckle.AspNetCore 是一个流行的 .NET 库，它使得在 AS…...
混合学习：Bagging与Boosting的深度解析与实践指南
引言 在机器学习的世界里，模型的性能优化一直是研究的核心问题。无论是分类任务还是回归任务，我们都希望模型能够在新的数据上表现出色，即具有良好的泛化能力。然而，实际应用中常常遇到模型过拟合（高方差）…...
基于大疆Mini 3无人机和指定软件工具链的完整3D建模工作
基于大疆Mini 3无人机和指定软件工具链的完整3D建模工作流程关键步骤： 1. 无人机航拍准备 • 设备检查：确保大疆 Mini 3 电量充足，相机设置为 RAW 格式（便于后期调色），关闭自动白平衡。 • 飞行规划&…...
开源项目实战学习之YOLO11：12.1 ultralytics-models-sam-blocks.py源码
👉 点击关注不迷路 👉 点击关注不迷路 👉 另外，前些天发现了一个巨牛的AI人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。感兴趣的可以点击相关跳转链接。 点击跳转到网站。 ultralytics-models-sam 1.sam-modules-__init__.py2.sam-modules-blocks.pybl…...
3D个人简历网站 5.天空、鸟、飞机
1.显示天空 models下新建文件Sky.jsx Sky.jsx // 从 React 库中导入 useRef 钩子，用于创建可变的 ref 对象 import { useRef } from "react"; // 从 react-three/drei 库中导入 useGLTF 钩子，用于加载 GLTF 格式的 3D 模型 import { useGLT…...
蓝桥杯-不完整的算式
问题描述 小蓝在黑板上写了一个形如 AopBCAopBC 的算式，其中 AA、BB、CC 都是非负整数，opop 是 、-、*、/、-、*、/（整除）四种运算之一。不过 AA、opop、BB、CC 这四部分有一部分被不小心的同学擦掉了。 给出这个不完整的算式&a…...
【Python 算法零基础 3.递推】
压抑与痛苦，那些辗转反侧的夜，终会让我们更加强大 —— 25.5.16 一、递推的概念 递推 —— 递推最通俗的理解就是数列，递推和数列的关系就好比 算法 和 数据结构 的关系，数列有点像数据结构中的线性表(可以是顺序表，也…...
)
计算机视觉与深度学习 ｜ Matlab实现EMD-LSTM和LSTM时间序列预测对比（完整源码和数据)
EMD-LSTM与LSTM 一、数据生成与预处理二、经验模态分解（EMD）三、数据预处理四、模型构建与训练1. 单一LSTM模型2. EMD-LSTM混合模型五、预测与结果对比1. 单一LSTM预测2. EMD-LSTM预测3. 性能评估六、结果可视化七、完整代码说明八、典型输出结果九、改进方向以下是用MATLAB实…...