vue+intro.js插件实现引导功能
作者：妍崽崽@
使用 intro.js这个插件,来实现一个引导性的效果,经常在一些新手引导页遇到这样的需求,下面通过本文给大家分享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('右箭头被按下');
// 在此处处理右箭头的逻辑
}
});到此这篇关于vue+intro.js插件实现引导功能的文章就介绍到这了,更多相关vue引导功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！