同学们在使用某些网站的新版页面的时候&＃xff0c;会遇到类似于新手引导的效果&＃xff0c;引导用户去了解新版页面的功能或者效果&＃xff0c;那么你知道是怎么实现的吗&＃xff1f;其实只需要vue &＃43; intro.js几步就能实现&＃xff0c;赶紧来看一看吧~~~
一、效果展示
那激动人心的时刻到了&＃xff0c;我们如何vue中使用 Intro.js 在呢&＃xff1f;
二、今天的猪脚Intro.js
2.1、Intro.js的安装
Intro.js是一个轻量级的js库&＃xff0c;用于创建一步一步的产品引导&＃xff0c;支持使用键盘的前后方向键导航&＃xff0c;使用 Enter 和 ESC 键推出引导&＃xff0c;您可以通过几个简单的步骤安装Intro.js
Intro.js - Lightweight, user-friendly onboarding tour libraryintrojs.com
我们引入下述文件
2.2、Intro.js基本使用
接着在HTML文件中加入基本结构
欢迎&＃xff0c;这是第一步。
你好&＃xff0c;这是第二步。
大家好&＃xff0c;这是第三步。
data-step是步骤&＃xff0c;data-intro是对每一步的介绍。
最后我们加入JS代码就可以通过浏览器运行查看效果啦(*&＃xffe3;︶&＃xffe3;)
感觉如何&＃xff0c;是不是很简单&＃xff0c;接下来我们学习如何在VUE项目中使用
三、 在vue-cli项目中使用
3.1、准备
首先打开项目&＃xff0c;下载Intro.js模块
//使用yarn
yarn add Intro.js
//npm
npm i Intro.js -S
//cnpm
cnpm i Intro.js -S
3.2、使用
找到需要加新手引导的组件&＃xff0c;导入Intro.js组件和样式
import introJs from &＃39;intro.js&＃39;
import &＃39;intro.js/introjs.css&＃39;
在methods中封装guide方法
// 导出组件数据
export default {// 定义方法methods: {guide() {introJs().setOptions({nextLabel: &＃39;下一个&＃39;, // 下一个按钮文字prevLabel: &＃39;上一个&＃39;, // 上一个按钮文字skipLabel: &＃39;跳过&＃39;, // 跳过按钮文字doneLabel: &＃39;立即体验&＃39;,// 完成按钮文字hidePrev: true, // 在第一步中是否隐藏上一个按钮hideNext: true, // 在最后一步中是否隐藏下一个按钮exitOnOverlayClick: false, // 点击叠加层时是否退出介绍showStepNumbers: false, // 是否显示红色圆圈的步骤编号disableInteraction: true, // 是否禁用与突出显示的框内的元素的交互&＃xff0c;就是禁止点击showBullets: false // 是否显示面板指示点}).start()},},
}
接着在钩子函数mounted中调用
import introJs from &＃39;intro.js&＃39;
import &＃39;intro.js/introjs.css&＃39;
// 导出组件数据
export default {// 钩子函数mounted() {this.guide()},// 定义方法methods: {guide() {introJs().setOptions({nextLabel: &＃39;下一个&＃39;, // 下一个按钮文字prevLabel: &＃39;上一个&＃39;, // 上一个按钮文字skipLabel: &＃39;跳过&＃39;, // 跳过按钮文字doneLabel: &＃39;立即体验&＃39;,// 完成按钮文字hidePrev: true, // 在第一步中是否隐藏上一个按钮hideNext: true, // 在最后一步中是否隐藏下一个按钮exitOnOverlayClick: false, // 点击叠加层时是否退出介绍showStepNumbers: false, // 是否显示红色圆圈的步骤编号disableInteraction: true, // 是否禁用与突出显示的框内的元素的交互&＃xff0c;就是禁止点击showBullets: false // 是否显示面板指示点}).start()},},
}
最后就是给需要加引导的盒模型加属性就大功告成了
data-step&＃61;"步骤数字" data-intro&＃61;"每一步的介绍字符串"
全部参考代码
{{firstItem.auth_name}}{{twoItem.auth_name}}
{{uname}}&＃xff08;{{rolename}}&＃xff09;
好了到这里就结束了&＃xff0c;你学会了吗&＃xff0c;赶紧动动小手代码敲起来(&＃xff5e;&＃xffe3;▽&＃xffe3;)&＃xff5e;
【千锋教育】Web前端全套视频教程1000集&＃xff08;入门到精通2020版&＃xff09;_哔哩哔哩 (゜-゜)つロ 干杯~-bilibiliwww.bilibili.com
【千锋】2020版Javascript基础入门教程全集&＃xff08;强烈推荐&＃xff09;_哔哩哔哩 (゜-゜)つロ 干杯~-bilibiliwww.bilibili.com
【千锋教育】VUE全套教程从入门到精通_哔哩哔哩 (゜-゜)つロ 干杯~-bilibiliwww.bilibili.com
原文来自知乎&＃xff1a;千锋HTML5学院
原文链接&＃xff1a;如何使用 vue &＃43; intro 实现后台管理系统的新手引导
京公网安备 11010802041100号