Vue新手引导插件
雪天web
共 10679字，需浏览 22分钟
·
2024-04-10 13:44
类似这样的效果也很常见，就是新手引导效果，自己写还是要花费些力气的，所以推荐一个插件intro.js,此插件可以轻松实现新手引导的效果。
01：安装intro.js
npm install intro.js --save
02：main.js中引入此插件
// 首页引导插件
import intro from 'intro.js' // introjs库
import 'intro.js/introjs.css' // introjs默认css样式
// introjs还提供了多种主题，可以通过以下方式引入
import 'intro.js/themes/introjs-modern.css' // introjs主题
// 把intro.js加入到vue的prototype中，方便使用，就可以直接通过this.$intro()来调用了
Vue.prototype.$intro = intro
03：页面中使用(可直接CV看效果)
<!-- 新手引导 -->
<template>
<div>
<div class="new-tips" @click="viewIntro()">新人教程</div>
<div class="Box">
<div id="step1">
<div>步骤一的内容展示区域</div>
</div>
<div id="step2">
<div>步骤二的内容展示区域</div>
</div>
<div id="step3">
<div>步骤三的内容展示区域</div>
</div>
<div id="step4">
<div>步骤四的内容展示区域</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "guidStep",
data() {
return {
introOption: {
// 参数对象
prevLabel: "上一步",
nextLabel: "下一步",
skipLabel: "跳过",
doneLabel: "完成",
tooltipClass: "intro-tooltip" /* 引导说明文本框的样式 */,
// highlightClass: 'intro-highlight', /* 说明高亮区域的样式 */
exitOnEsc: true /* 是否使用键盘Esc退出 */,
exitOnOverlayClick: false /* 是否允许点击空白处退出 */,
keyboardNavigation: true /* 是否允许键盘来操作 */,
showBullets: false /* 是否使用点显示进度 */,
showProgress: false /* 是否显示进度条 */,
scrollToElement: true /* 是否滑动到高亮的区域 */,
overlayOpacity: 0.5, // 遮罩层的透明度 0-1之间
positionPrecedence: [
"bottom",
"top",
"right",
"left",
] /* 当位置选择自动的时候，位置排列的优先级 */,
disableInteraction: false /* 是否禁止与元素的相互关联 */,
hidePrev: true /* 是否在第一步隐藏上一步 */,
// hideNext: true, /* 是否在最后一步隐藏下一步 */
steps: [] /* steps步骤，可以写个工具类保存起来 */,
},
tipsImg2: require("../assets/logo.png"), // 新手引导的提示图片
};
},
methods: {
// 重新查看引导
viewIntro() {
this.initGuide();
},
initGuide() {
// 绑定标签元素的选择器数组
this.introOption.steps = [
{
title: "第一步",
element: "#step1",
intro: `这是步骤一。`,
},
{
title: "第二步",
element: "#step2",
intro:
`这是步骤二。<img src="` +
this.tipsImg2 +
`" alt="" style="width: 100px;margin-top: 10px;"/>`,
},
{
title: "第三步",
element: "#step3",
intro: `这是步骤三。`,
},
{
title: "重新开始",
element: "#step4",
intro: "点击此处可重新查看引导流程。",
},
];
this.$intro()
.setOptions(this.introOption)
// 点击结束按钮后执行的事件
.oncomplete(() => {
console.log("点击结束按钮后执行的事件");
})
// 点击跳过按钮后执行的事件
.onexit(() => {
console.log("点击跳过按钮后执行的事件");
})
// 确认完毕之后执行的事件
.onbeforeexit(() => {
console.log("确认完毕之后执行的事件");
})
.start();
},
},
// 在 mounted 中调用方法
mounted() {
this.$nextTick(() => {
if (
localStorage.getItem("isFirst") === null ||
localStorage.getItem("isFirst") !== "1"
) {
this.$intro().start();
localStorage.setItem("isFirst", 1);
}
});
},
};
</script>
<style>
.Box {
margin-top: 50px;
display: flex;
justify-content: space-between;
}
.Box div {
width: 200px;
height: 200px;
background: #409eff;
}
.Box div div {
line-height: 200px;
text-align: center;
color: #fff;
}
.introjs-helperLayer {
box-shadow: rgba(151, 151, 151, 0.8) 0px 0px 1px 0px,
rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;
border: 2px dashed #40ff79;
}
.new-tips {
color: #ff5040;
line-height: 80px;
cursor: pointer;
}
.introjs-tooltip-title {
font-size: 16px;
width: 80%;
padding-top: 10px;
}
.warper {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid saddlebrown;
}
/* 重置引导组件样式(类似element-ui个人使用) */
.intro-tooltip {
color: #ffff;
background: #2c3e50;
}
/* 引导提示框的位置 */
.introjs-bottom-left-aligned {
left: 45% !important;
}
.introjs-right,
.introjs-left {
top: 30%;
}
.intro-highlight {
background: rgba(255, 255, 255, 0.5);
}
.introjs-arrow.left {
border-right-color: #2c3e50;
}
.introjs-arrow.top {
border-bottom-color: #2c3e50;
}
.introjs-arrow.right {
border-left-color: #2c3e50;
}
.introjs-arrow.bottom {
border-top-color: #2c3e50;
}
/* 提示框头部区域 */
.introjs-tooltip-header {
padding-right: 0 !important;
padding-top: 0 !important;
}
.introjs-skipbutton {
color: #409eff !important;
font-size: 14px !important;
font-weight: normal !important;
padding: 8px 10px !important ;
}
.introjs-tooltipbuttons {
border: none !important;
}
.introjs-tooltiptext {
font-size: 14px !important;
padding: 15px !important;
}
/* 提示框按钮 */
.introjs-tooltipbuttons {
display: flex;
align-items: center;
justify-content: center;
}
.introjs-button {
width: 50px !important;
text-align: center;
padding: 4px !important;
font-size: 12px !important;
font-weight: 500 !important;
border-radius: 3px !important;
border: none !important;
}
.introjs-button:last-child {
margin-left: 10px;
}
.introjs-prevbutton {
color: #606266 !important;
background: #fff !important;
border: 1px solid #dcdfe6 !important;
}
.introjs-nextbutton {
color: #fff !important;
background-color: #409eff !important;
border-color: #409eff !important;
}
.introjs-disabled {
color: #9e9e9e !important;
border-color: #bdbdbd !important;
background-color: #f4f4f4 !important;
}
</style>
道友们，建了个群，感兴趣的话欢迎来一起交流学习，共讨bug呀。
评论