vue+intro.js实现引导功能

前言:

        使用 intro.js这个插件,来实现一个引导性的效果,适用场景,比如:新手引导页,操作说明等等

效果图:

官网地址:点我

实现步骤:

1、安装
npm install intro.js --save
pnpm/cnpm  用法一样yarn add intro.js
2、使用方法1,新建一个单独vue组件
template部分:
<template><div class='card-demo'>我是界面写入的元素</div>
</template>
js部分:
import intro from "intro.js"  // introjs库
import "intro.js/introjs.css" // introjs默认css样式
data() {return {option: {// 参数对象prevLabel: "上一步",nextLabel: "下一步",skipLabel: "跳过",doneLabel: "完成",tooltipClass: "intro-tooltip" /* 引导说明文本框的样式 */,// highlightClass: 'intro-highlight', /* 说明高亮区域的样式 */exitOnEsc: true /* 是否使用键盘Esc退出 */,exitOnOverlayClick: false /* 是否允许点击空白处退出 */,keyboardNavigation: true /* 是否允许键盘来操作 */,showBullets: false /* 是否使用点显示进度 */,showProgress: false /* 是否显示进度条 */,scrollToElement: true /* 是否滑动到高亮的区域 */,skipHighlight: true,overlayOpacity: 0.5, // 遮罩层的透明度 0-1之间positionPrecedence: ["bottom","top","right","left",] /* 当位置选择自动的时候,位置排列的优先级 */,disableInteraction: false /* 是否禁止与元素的相互关联 */,hidePrev: true /* 是否在第一步隐藏上一步 */,hideNext: false /* 是否在最后一步隐藏下一步 */,steps: [] /* steps步骤,可以写个工具类保存起来 */,},}
}
methods:{init(){let steps= [{title: 'Welcome',intro: 'Hello World! 👋'},{ // 图片的可以展示intro: '<img src="https://i.giphy.com/media/ujUdrdpX7Ok5W/giphy.webp" onerror="this.onerror=null;this.src=\'https://i.giphy.com/ujUdrdpX7Ok5W.gif\';" alt="">'},{ // 可以指定界面上的元素,然后显示指定内容element: document.querySelector('.card-demo'),intro: 'This step focuses on an element'}]introJs().setOptions({...this.option,// 配置属性steps: steps // 每一步展示的内容}).oncomplete(() => {    console.log("点击结束按钮后执行的事件")    }).onexit(() => {    console.log("点击跳过按钮后执行的事件")    }).onbeforeexit(() => { console.log('确认完毕之后执行的事件')    }).start()},}
mounted(){this.init()
}
3、使用方法2
  • data-title:标题文字
  • data-intro:提示信息内容
  • data-step:步骤的编号(优先级)
  • data-tooltipClass:为提示定义CSS类
  • data-highlightClass:将CSS类附加到helperLayer
  • data-position:提示的位置,默认是bottom
  • data-scrollTo:滚动到的元素,element或tooltip。默认值为element。
  • data-disable-interaction:是否禁用与突出显示的框内的元素的交互
template部分:
<template><div data-title="test1" data-intro="intro-test1" data-step='1'>第一步</div><div data-title="test2" data-intro="intro-test2" data-step='2'>第二步</div><div data-title="test3" data-intro="intro-test3" data-step='3'>第三步</div>
</template>
js部分:
mounted(){introJs().start()
}

4、键盘事件

window.addEventListener('keydown', function(event) {// 左箭头if(event.keyCode == 37) {console.log('左箭头被按下');// 在此处处理左箭头的逻辑}// 右箭头else if(event.keyCode == 39) {console.log('右箭头被按下');// 在此处处理右箭头的逻辑}
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/353715.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Netty】nio处理acceptreadwrite事件

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;Netty ⛺️稳中求进&#xff0c;晒太阳 1.处理accept 1.1客户端代码 public class Client {public static void main(String[] args) {try (Socket socket new Socket("localhost…

【Cloudscapes V2】Blender商城10周年免费领取礼物超逼真的Vdb云和爆炸合集烟雾体积云字体符号轨迹火焰粒子

6月19号的限时免费领取插件挺牛的&#xff0c;可以在blender里渲染体积云、爆炸特效、火焰、烟雾等效果&#xff0c;非常逼真。 Blender商城10周年免费领取礼物&#xff1a;https://blendermarket.com/birthday Cloudscapes V2 - 超逼真的 Vdb 云和爆炸合集 CloudScapes 是 …

如何快速在一台新电脑上安装 Python 环境

一、下载miniconda 1.下载 我们可以在清华大学开源软件镜像站下载最新版本的miniconda。如&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda/Miniconda3-py38_4.9.2-Windows-x86_64.exe 2.安装 双击exe文件安装&#xff0c;如果没有特殊的需求&#x…

C# 索引器与迭代器分部类详情

文章目录 一、迭代器二、查看Foreach执行中间语言三、foreach实现过程总结四、实现迭代器最常用的方法五、分布类概述及其使用六、索引器概述及声明七、索引器在类中的使用八、索引器在接口中的使用九、总结 一、迭代器 1、迭代器&#xff08;iterator&#xff09;解决的是集合…

vue3+ts+vite集成eslint

项目中安装eslint yarn add eslint -Deslint初始化 npx eslint --init按照下方操作即可 安装typescript-eslint/parser yarn add typescript-eslint/parser -D安装vite-plugin-eslint2 yarn add vite-plugin-eslint2 -D配置vite-plugin-eslint2 // vite.config.ts import …

Linux系统编程——进程信号

目录 一&#xff0c;信号预备 1.1 生活中的信号 1.2 技术应用中的信号 1.3 signal函数捕捉信号 1.3 信号的发送与记录 1.4 信号的常见处理方式 二&#xff0c;信号的产生 2.1 核心转储 2.1.1 环境配置 2.1.2 利用core文件进行调试 2.1.3 core dump标志 2.2 通过系统…

所以spring mvc异常处理工作原理是啥

文章目录 spring mvc异常处理&#xff08;源码分析&#xff09;概述原理&#xff08;源码角度&#xff09;模拟debug前期提要分析4个map4个map的初始化为什么需要基于mappedMethods缓存 总结一下 spring mvc异常处理&#xff08;源码分析&#xff09; 概述 spring mvc有下面三…

127.0.0.1与本机IP地址的区别

大家好&#xff0c;今天我们来聊聊一个在网络世界中常常被提及&#xff0c;但可能对于非专业人士来说还有些模糊的概念——127.0.0.1与本机IP地址。这两个地址在网络通信中都扮演着重要的角色&#xff0c;但它们之间又有着怎样的区别呢&#xff1f;让我们一起来探究一下。 一、…

简单Mesh多线程合并,使用什么库性能更高

1&#xff09;简单Mesh多线程合并&#xff0c;使用什么库性能更高 2&#xff09;Unity Semaphore.WaitForSignal耗时高 3&#xff09;VS编辑的C#代码注释的中文部分乱码 4&#xff09;变量IntPtr m_cachePtr切换线程后变空 这是第389篇UWA技术知识分享的推送&#xff0c;精选了…

【GO-OpenCV】go-cv快速配置

最近对golang实现目标检测心血来潮&#xff0c;尝试在没有sudo权限的平台配置go-cv,有所发现&#xff0c;索性多个平台都做尝试 安装Go语言&#xff08;Golang&#xff09; 通过包管理器安装&#xff08;适用于Debian/Ubuntu&#xff09;(有点慢) 更新包列表&#xff1a; sud…

AbMole带你探索颅内压力与肌肉生长的联系:一项突破性研究

在生物医学领域&#xff0c;颅内压力&#xff08;ICP&#xff09;的调控机制一直是研究的热点。最近&#xff0c;一项发表在《PLOS ONE》上的研究为我们揭示了颅内压力与后颅窝肌肉生长之间的潜在联系&#xff0c;为我们理解某些慢性头痛的成因提供了新的视角。 颅内压力的异常…

大数据的发展,带动电子商务产业链,促进了社会的进步【电商数据采集API接口推动电商项目的源动力】

最近几年计算机技术在诸多领域得到了有效的应用&#xff0c;同时在多方面深刻影响着我国经济水平的发展。除此之外&#xff0c;人民群众的日常生活水平也受大数据技术的影响。 在这其中电子商务领域也在大数据技术的支持下&#xff0c;得到了明显的进步。虽然电子商务领域的发…

酷开科技将AI与大数据融合,成为OTT大屏营销革新的驱动力

在数字化浪潮的推动下&#xff0c;营销领域正经历着深刻的变革。而在这样一个媒介渠道分散、注意力碎片化的时代&#xff0c;“大屏”是难得能让消费者们“精神集中”高度卷入的内容消费场景&#xff0c;也是能让品牌一对多地高效触达家庭人群的通道&#xff0c;大屏的独特营销…

TVBOX 最新版下载+视频源教程

下载链接 wx 搜索 Geek 前端 发送电视资源进行获取 操作教程

【数据结构与算法】对称矩阵,三角矩阵 详解

给出对称矩阵、三角矩阵的节省内存的存贮结构并写出相应的输入、输出算法。 对称矩阵和三角矩阵可以通过特殊的存储结构来节省内存。这种存储结构只存储矩阵的一部分元素&#xff0c;而不是全部元素。 对称矩阵&#xff1a;对于一个n阶对称矩阵&#xff0c;我们只需要存储主对…

VUE 项目用 Docker+Nginx进行打包部署

一、Docker Docker 是一个容器化平台&#xff0c;允许你将应用程序及其依赖项打包在容器中。使用 Docker&#xff0c;你可以创建一个包含 Vue.js 应用程序的容器镜像&#xff0c;并在任何支持 Docker 的环境中运行该镜像。 二、Nginx Nginx 是一个高性能的 HTTP 服务器和反向…

钡铼技术BL104在环境监测站多协议采集保障数据全面准确

随着工业化和城市化进程的加快&#xff0c;环境污染问题日益严重&#xff0c;环境监测站在保护生态环境、保障公众健康中的作用变得越来越重要。钡铼技术PLC物联网关BL104&#xff0c;为环境监测站提供了一种高效、可靠的多协议数据采集解决方案&#xff0c;保障了监测数据的全…

Hype 4(html5工具) mac版下载-Hype 4 for mac软件最新版下载附加详细安装步骤

用户量向我们证明了矢量形状&#xff0c;矢量是使用矢量工具绘制的形状&#xff0c;包括直线&#xff0c;曲线和复杂形状。有目共睹的是Hype是一款强大的Mac OS平台 HTML5 创作工具&#xff0c;它能够在网页上做出赏心悦目的动画片效果&#xff0c;创建丰富的网页交互动画片&am…

域策略笔记

域策略 导航 文章目录 域策略导航一、设置客户端壁纸二、重定向用户配置文件路径三、部署网络打印机四、部署共享文件夹为网络驱动器五、通过域策略推送软件安装六、通过域策略限制软件的使用通过路径进行限制通过进程限制 七、通过域策略将文件添加白名单八、通过域策略添加可…

大数据集群离线解析经纬度逆编码地址

背景 最近有个需要需求把经纬度解析为地址&#xff0c;那么通常解析地址市面上流行的方案就是调取百度、高德地图的接口进行解析。 难点 但是在用这个方案遇到一个问题就是企业认证的百度地图每天的逆编码解析为300w次&#xff0c;qps为100次/秒&#xff0c;对于日增上千万的…