intro.js分步向导插件使用方法

前言

这里只介绍通过JSON配置的introJs用法

介绍

Intro.js 一个引导用户的js/css库, 没有任何依赖.

安装

npm install intro.js --save

Doc

文档地址: https://introjs.com/docs/

使用

页面引入

  import intro from 'intro.js';
  import 'intro.js/minified/introjs.min.css';

html

<template>
    <a-button type="primary" @click="handleStart">开始</a-button>
</template>

js

 function handleStart() {
        intro()
          .setOptions({
            steps: [
              {
                title: 'Welcome',
                intro: 'Hello World! 👋',
              },
              {
                title: 'Collapse Button',
                element: document.querySelector(`.${prefixVar}-layout-header-trigger`)!,
                intro: 'This is the menu collapse button.',
              },
              {
                title: 'User Action',
                element: document.querySelector(`.${prefixVar}-layout-header-action`)!,
                intro: 'This is the user function area.',
              },
            ],
          })
          .start();
      }

效果如下:

setOptions来设置当前实例，核心的部分就是设置steps，这里包含了所有引导的步骤，比较常用的属性如下：

interface StepsObj {
  // 标题
  title?: string;
  // 简介
  intro?: string;
  // 高亮的DOM元素
  element?: any;
  // 提示框位置
  position?: string;
}

setOptions除了steps属性外，还有其他属性可以配置提示框，这里提供部分属性以供参考：

 // 禁止元素互动(被引导的元素不能点击)
  disableInteraction: true,
  // 下一步按钮的名称
  nextLabel: '下一个',
  // 上一步按钮的名称
  prevLabel: '返回',
  // 跳过按钮的名称
  skipLabel: '跳过引导',
  // 结束按钮的名称
  doneLabel: '完成',
  // 为 intro 指定类名
  tooltipClass: 'toolTip',
  // 是否允许点击空白处退出
  exitOnOverlayClick: true,
  // 是否显示轮播点
  showBullets: true,
  // 是否使用进度条
  showProgress: true,
  // 显示步数  eg: 1/5
  showStepNumbers: true,
  // 是否允许键盘来操作
  keyboardNavigation: true,

完整属性移步官方文档: https://introjs.com/docs/intro/options

动态的steps

实际使用时遇到权限问题，不同用户权限不同，看到的页面也有所不同，从而引导的元素也会有差别，如果写死steps，会导致某些元素找不到而报错，引导也不能进行。一开始想的是根据权限进行判断来动态增减steps，但是权限实在复杂，而我们要做的其实很简单，找不到的元素就不引导！

配置文件中:

export function stepsOfProduct() {
  const stepsList = [
    {
      title: '查询',
      element: document.getElementsByClassName('search-box')[0].getElementsByTagName('BUTTON')[0],
      intro: '填写查询条件后，进行查询操作',
    },
    {
      title: '重置',
      element: document.getElementsByClassName('search-box')[0].getElementsByTagName('BUTTON')[1],
      intro: '清空查询条件',
    },
  ];
  // 权限
  // 判断DOM是否存在, ??的意思是不存在时设为'' 不会引起报错
  const addApplyBtnDOM = document.getElementsByClassName('add-apply')[0] ?? '';
  addApplyBtnDOM &&
    stepsList.push({
      title: '添加申请人',
      element: addApplyBtnDOM,
      intro: '新增申请人',
    });
  return stepsList;
}

前面的配置进行修改:

 function handleStart() {
        intro()
          .setOptions({
            steps: stepsOfProduct(),
          })
          .start();
      }

这样我们可以对页面所有有权限的元素进行动态引导

提示信息中使用icon

有时我们可能会需要这样的效果:

事实上，steps数组对象中的intro除了是文本之外，还可以是HTML字符串

  {
    title: 'Farewell!',
    element: document.querySelector('.card__image'),
    intro: '<img src="https://images.unsplash.com/photo-1608096299210-db7e38487075?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" />'
  }]

效果：

对于icon我们可能经常使用的是组件来完成，但是icon组件的本质还是渲染一个SVG，浏览器中通过shift+ ctrl + c点击渲染的图标找到对应的svg复制粘贴即可

{
      title: '填写状态',
      element: fillStatusDOM,
      intro:
        '<div><svg width="1em" height="1em" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path fill="#55d187" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg>代表填写完整，<svg width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path fill="#efbd47" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg>代表存在未填项</div>',
    })

以上！