vue intro.js 三方库实现新手引导, 新手提示

实现新手引导,新手提示,动画新颖,用户体验感拉满.

1.引入 && 安装

npm install intro.js --save

yarn add intro.js

import intro from "intro.js"; // introjs库
import "intro.js/introjs.css"; // introjs默认css样式

Vue.prototype.$intro = intro; //如有需要 main.js

2.options

//  新手引导
      introOption: {
        // 参数对象
        prevLabel: "上一步",
        nextLabel: "下一步",
        skipLabel: "跳过",
        doneLabel: "完成",
        tooltipClass: "intro-tooltip" /* 引导说明文本框的样式 */,
        // highlightClass: 'intro-highlight', /* 说明高亮区域的样式 */
        exitOnEsc: true /* 是否使用键盘Esc退出 */,
        exitOnOverlayClick: false /* 是否允许点击空白处退出 */,
        keyboardNavigation: true /* 是否允许键盘来操作 */,
        showBullets: false /* 是否使用点显示进度 */,
        showProgress: false /* 是否显示进度条 */,
        scrollToElement: true /* 是否滑动到高亮的区域 */,
        skipHighlight: true,
        overlayOpacity: 0.5, // 遮罩层的透明度 0-1之间
        positionPrecedence: [
          "bottom",
          "top",
          "right",
          "left",
        ] /* 当位置选择自动的时候，位置排列的优先级 */,
        disableInteraction: false /* 是否禁止与元素的相互关联 */,
        hidePrev: true /* 是否在第一步隐藏上一步 */,
        hideNext: false /* 是否在最后一步隐藏下一步 */,
        steps: [] /* steps步骤，可以写个工具类保存起来 */,
      },

绑定元素

<div id="step1">
  <el-button size="mini" type="warning" @click="viewIntro()">使用演示</el-button>
</div>
<div id="step2">
  *****巴拉巴拉
</div>

3.初始化
其中的监听事件是因为场景需要点击键盘方向键可以执行下一步操作,不需要请忽略.我把监听方法放到最后了.

initIntro() {
      let that = this;
      // 绑定标签元素的选择器数组 上方options 变量
      this.introOption.steps = [
        {
          title: "1/10 你好,欢迎来到CSDN",
          element: "#step1",intro: `鼠标悬浮在各个功能模块上，可快速查找系统对应操作SOP以及运维人员。<img src="` + this.tipsImg1 + `" alt="" style="width: 200px;margin-top: 15px;"/>`
        },
        {
          title: "2/10 任务名称",
          element: "#step2",
          intro: `输入新建/复制的任务名称 例如：CSDN2024年新任务。`,
        },
        },
      ];
      //需在main.js 中把intro.js加入到vue的prototype中
      this.$intro()
        .setOptions(this.introOption)
        // 点击结束按钮后执行的事件
        .oncomplete(() => {
          console.log("点击结束按钮后执行的事件");
          document.removeEventListener("click", this.handleOutsideClick);
        })
        // 点击跳过按钮后执行的事件
        .onexit(() => {
          console.log("点击跳过按钮后执行的事件");
          document.removeEventListener("click", this.handleOutsideClick);
        })
        // 确认完毕之后执行的事件
        .onbeforeexit(() => {
          // console.log('确认完毕之后执行的事件')
        })
        .start();
        document.addEventListener("click", this.handleOutsideClick);
    },

样式调整 我在组建中直接调整样式,不起作用.考虑到整个系统中只有一个新手引导.所以把样式引到了app.vue中.

//新手指引 样式
.intro-tooltip {
  .introjs-tooltip-header{
    padding-left: 12px;
    padding-right: 12px;
  }
  .introjs-tooltip-title {
    font-size: 14px;
  }
  .introjs-skipbutton {
    font-size: 14px;
  }
  .introjs-tooltiptext {
    font-size: 12px;
    padding: 12px;
  }
  .introjs-tooltipbuttons {
    .introjs-button {
      font-size: 12px;
      padding: 3px 5px;
    }
  }
}

看看最终的效果吧.

    handleOutsideClick(event) {
      if (event && event.target.className.includes("introjs-overlay")) {
        event.stopPropagation(); // 阻止事件冒泡
        this.simulateRightArrowKey();
      }
    },
    // 模仿键盘 右方向键
    simulateRightArrowKey() {
      this.eventTarget = new KeyboardEvent("keydown", {
        key: "ArrowRight",
        code: "ArrowRight",
        which: 39,
        bubbles: true,
        cancelable: true,
      });
      document.dispatchEvent(this.eventTarget);
    },