如何使用 vue + intro 实现后台管理系统的引导
作者：千锋IT教育
- 2022-12-05 北京
本文字数：4098 字
阅读完需：约 13 分钟
引言
为了让用户更好的适应新版，或更方便使用公司内部系统，可以加入新手指引功能。如果你也想在自己的网页加入用户指引，那就试试在 vue 中使用 Intro.js 吧，它能够很轻松的制作出新手指引的效果。 一、效果介绍 话不多说，咱们先来上一张图看看效果
那激动人心的时刻到了，我们如何 vue 中使用 Intro.js 在呢？
二、Intro.js
2.1、Intro.js 的安装
Intro.js 是一个轻量级的 js 库，用于创建一步一步的产品引导，支持使用键盘的前后方向键导航，使用 Enter 和 ESC 键推出引导，您可以通过几个简单的步骤安装 Intro.js
Intro.js - Lightweight, user-friendly onboarding tour libraryintrojs.com
首先我们引入下述文件
<link rel="stylesheet" href="https://unpkg.com/intro.js/minified/introjs.min.css"><script src="https://unpkg.com/intro.js/minified/intro.min.js"></script>复制代码复制代码
2.2、Intro.js 基本使用
接着在 HTML 文件中加入基本结构
<div data-step="1" data-intro="第一步，欢迎！">欢迎，这是第一步。</div><div data-step="2" data-intro="第二步，你好！">你好，这是第二步。</div><div data-step="3" data-intro="第三步，大家好！">大家好，这是第三步。</div>复制代码复制代码
data-step 是步骤，data-intro 是对每一步的介绍。
最后我们加入 JS 代码就可以通过浏览器运行查看效果啦
<script>introJs().setOptions({ nextLabel: '下一个 →', // 下一个按钮文字 prevLabel: '← 上一个', // 上一个按钮文字 skipLabel: '跳过', // 跳过按钮文字 doneLabel: '立即体验', // 完成按钮文字 hidePrev: true, // 在第一步中是否隐藏上一个按钮 hideNext: true, // 在最后一步中是否隐藏下一个按钮 exitOnOverlayClick: false, // 点击叠加层时是否退出介绍 showStepNumbers: false, // 是否显示红色圆圈的步骤编号 disableInteraction: true, // 是否禁用与突出显示的框内的元素的交互，就是禁止点击 showBullets: false // 是否显示面板指示点}).start();</script>复制代码复制代码
感觉如何，是不是很简单，接下来我们学习如何在 VUE 项目中使用
三、 在 vue-cli 项目中使用
3.1、准备
首先打开项目，下载 Intro.js 模块
//使用yarnyarn add Intro.js//npmnpm i Intro.js -S//cnpmcnpm i Intro.js -S复制代码复制代码
3.2、使用
找到需要加新手引导的组件，导入 Intro.js 组件和样式
import introJs from 'intro.js'import 'intro.js/introjs.css'在methods中封装guide方法
// 导出组件数据export default { // 定义方法 methods: { guide() { introJs() .setOptions({ nextLabel: '下一个', // 下一个按钮文字 prevLabel: '上一个', // 上一个按钮文字 skipLabel: '跳过', // 跳过按钮文字 doneLabel: '立即体验',// 完成按钮文字 hidePrev: true, // 在第一步中是否隐藏上一个按钮 hideNext: true, // 在最后一步中是否隐藏下一个按钮 exitOnOverlayClick: false, // 点击叠加层时是否退出介绍 showStepNumbers: false, // 是否显示红色圆圈的步骤编号 disableInteraction: true, // 是否禁用与突出显示的框内的元素的交互，就是禁止点击 showBullets: false // 是否显示面板指示点 }).start() }, },}复制代码复制代码
接着在钩子函数 mounted 中调用
import introJs from 'intro.js'import 'intro.js/introjs.css'
// 导出组件数据export default { // 钩子函数 mounted() { this.guide() }, // 定义方法 methods: { guide() { introJs() .setOptions({ nextLabel: '下一个', // 下一个按钮文字 prevLabel: '上一个', // 上一个按钮文字 skipLabel: '跳过', // 跳过按钮文字 doneLabel: '立即体验',// 完成按钮文字 hidePrev: true, // 在第一步中是否隐藏上一个按钮 hideNext: true, // 在最后一步中是否隐藏下一个按钮 exitOnOverlayClick: false, // 点击叠加层时是否退出介绍 showStepNumbers: false, // 是否显示红色圆圈的步骤编号 disableInteraction: true, // 是否禁用与突出显示的框内的元素的交互，就是禁止点击 showBullets: false // 是否显示面板指示点 }).start() }, },}复制代码复制代码
最后就是给需要加引导的盒模型加属性就大功告成了
data-step="步骤数字" data-intro="每一步的介绍字符串" 全部参考代码
<template><div class="admin">
<!-- <section class="menu"> <ul> <li data-step="1" data-intro="1" >测试1</li> <li data-step="2" data-intro="2" >测试2</li> <li data-step="3" data-intro="3" >测试3</li> <li data-step="4" data-intro="4" >测试4</li> </ul> </section> -->
<!-- 左侧导航 --> <div class="menu" v-bind:style="{width: menuWStyle}" data-step="1" data-intro="导航菜单"> <!-- <el-radio-group v-model="isHiddenMenu" style="margin-bottom: 20px;"> <el-radio-button :label="false">展开</el-radio-button> <el-radio-button :label="true">收起</el-radio-button> </el-radio-group> --> <el-menu v-loading="menuLoading" :default-active="$route.path" class="el-menu-vertical-demo" :collapse="isHiddenMenu" :collapse-transition="false" background-color="#263445" text-color="rgb(191, 203, 217)" > <el-submenu v-for="(firstItem) in menus" :index="firstItem.auth_id" :key="firstItem.auth_id"> <template slot="title"> <i class="el-icon-menu"></i> <span slot="title">{{firstItem.auth_name}}</span> </template> <el-menu-item-group> <el-menu-item v-for="twoItem in firstItem.children" :key="twoItem.auth_id" :index="twoItem.url" @click="jump(twoItem.url)" ><i class="el-icon-setting"></i>{{twoItem.auth_name}}</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </div> <!-- /左侧导航 --> <!-- 右侧内容 --> <div class="main"> <!-- 顶部 --> <div class="top"> <div class="l"> <div class="btn" @click="changeMenuFn"> <!-- <i class="el-icon-s-fold"></i> --> <i v-bind:class="changeMenuIcon"></i> </div> <div class="breadcrumb"> <Breadcrumb v-bind:name1="name1" v-bind:name2="name2" /> </div> </div> <div class="r"> <span data-step="2" data-intro="用户名（角色）">{{uname}}（{{rolename}}）</span> <i data-step="3" data-intro="退出登录" class="el-icon-switch-button"></i> <i data-step="4" data-intro="窗口全屏" class="el-icon-full-screen"></i> </div> </div> <!-- /顶部 --> <!-- 内容 --> <div class="content" data-step="5" data-intro="主体内容" > <transition appear name="fade-transform" mode="out-in"> <router-view /> </transition> </div> <!-- /内容 --> </div> <!-- /右侧内容 --></div></template>
<script>// 导出组件数据import introJs from 'intro.js'import 'intro.js/introjs.css'
// 导出组件数据export default { // 钩子函数 mounted() { this.guide() }, // 定义方法 methods: { guide() { introJs() .setOptions({ nextLabel: '下一个', // 下一个按钮文字 prevLabel: '上一个', // 上一个按钮文字 skipLabel: '跳过', // 跳过按钮文字 doneLabel: '立即体验',// 完成按钮文字 hidePrev: true, // 在第一步中是否隐藏上一个按钮 hideNext: true, // 在最后一步中是否隐藏下一个按钮 exitOnOverlayClick: false, // 点击叠加层时是否退出介绍 showStepNumbers: false, // 是否显示红色圆圈的步骤编号 disableInteraction: true, // 是否禁用与突出显示的框内的元素的交互，就是禁止点击 showBullets: false // 是否显示面板指示点 }).start() }, },}</script><style lang="scss" scoped></style>复制代码复制代码
好了到这里就结束了，你学会了吗，赶紧动动小手代码敲起来
3.3、效果
表头的介绍的效果
划线
评论
复制
发布于: 刚刚阅读数: 6
千锋IT教育
关注
国内IT培训机构良心品牌 2022-08-02 加入
学习资料下载获取，添加QQ：3547925594
评论