如何使用 vue + intro 实现后台管理系统的引导_后台功能点引导

话不多说，咱们先来上一张图看看效果

那激动人心的时刻到了，我们如何vue中使用 Intro.js 在呢？

二、Intro.js

2.1、Intro.js的安装

Intro.js 是一个轻量级的js库，用于创建一步一步的产品引导，支持使用键盘的前后方向键导航，使用 Enter 和 ESC 键推出引导，您可以通过几个简单的步骤安装Intro.js

Intro.js - Lightweight, user-friendly onboarding tour library​introjs.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: '下一个  &rarr;',    // 下一个按钮文字
    prevLabel: '&larr; 上一个',     // 上一个按钮文字
    skipLabel: '跳过',              // 跳过按钮文字
    doneLabel: '立即体验',           // 完成按钮文字
    hidePrev: true,                 // 在第一步中是否隐藏上一个按钮
    hideNext: true,                 // 在最后一步中是否隐藏下一个按钮
    exitOnOverlayClick: false,  // 点击叠加层时是否退出介绍
    showStepNumbers: false,     // 是否显示红色圆圈的步骤编号
    disableInteraction: true,   // 是否禁用与突出显示的框内的元素的交互，就是禁止点击
    showBullets: false          // 是否显示面板指示点
}).start();
</script>

感觉如何，是不是很简单，接下来我们学习如何在VUE项目中使用

三、 在vue-cli项目中使用

3.1、准备

首先打开项目，下载Intro.js模块

//使用yarn
yarn add Intro.js
​
//npm
npm i Intro.js -S
​
//cnpm
cnpm 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">


### 最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![大厂面试题](https://img-blog.csdnimg.cn/img_convert/5a06e204c2b0f8b35ab7e65554082ca4.webp?x-oss-process=image/format,png)

![面试题目录](https://img-blog.csdnimg.cn/img_convert/15f68563151f7923dc3e8225675c89e2.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/1710dbe306648c8c13c1d4939612b889.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/82545b9e31a560855527ad03c12282f8.webp?x-oss-process=image/format,png)



总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

[外链图片转存中...(img-A4ZOjxvY-1714190802412)]

[外链图片转存中...(img-AohRcXVt-1714190802413)]

[外链图片转存中...(img-lTCBuGJA-1714190802413)]

[外链图片转存中...(img-TA1ZxgNy-1714190802414)]