新手指引(intro.js)

---

前言

在开发一个用户系统项目时，为了指引用户操作，常常需要做一下第一次进入的用户引导，这里用到了intro.js，它的兼容效果极好，而且大小只有647kB，方便实用。

---

一、安装

npm install intro.js --save

二、引入

//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

三、使用

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" id="step1" />
    <HelloWorld msg="Welcome to Your Vue.js App" id="step2" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  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步骤，可以写个工具类保存起来 */,
      },
      tipsImg1: require("./assets/logo.png"), // 新手引导的提示图片
      tipsImg2: require("./assets/logo.png"), // 新手引导的提示图片
    };
  },
  methods: {
    initGuide() {
      // 绑定标签元素的选择器数组
      this.introOption.steps = [
        {
          title: "系统使用指导",
          element: "#step1",
          intro:
            `鼠标悬浮在各个功能模块上，可快速查找系统对应操作SOP以及运维人员。<img src="` +
            this.tipsImg1 +
            `" alt="" style="width: 200px;margin-top: 15px;"/>`,
        },
        {
          title: "个人信息",
          element: "#step2",
          intro:
            `点击个人头像/下拉图标，选择个人信息，初始密码为******，建议修改为个人账号密码。<img src="` +
            this.tipsImg2 +
            `" alt="" style="width: 125px;margin-top: 15px;"/>`,
        },
        {
          title: "重新引导",
          element: "#step3",
          intro: "点击此处可重新查看引导流程。",
        },
      ];
      this.$intro()
        .setOptions(this.introOption)
        // 点击结束按钮后执行的事件
        .oncomplete(() => {
          console.log("点击结束按钮后执行的事件");
        })
        // 点击跳过按钮后执行的事件
        .onexit(() => {
          console.log("点击跳过按钮后执行的事件");
        })
        // 确认完毕之后执行的事件
        .onbeforeexit(() => {
          console.log("确认完毕之后执行的事件");
        })
        .start();
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initGuide(); // 调用新手引导的方法
    });
  },
};
</script>

四、效果展示