三分钟开发俩引导页，老板都直呼牛逼！

程序员老鱼

发布于 2023-09-21 15:33:27

9440

文章被收录于专栏：前端实验室前端实验室

开发了一个很牛逼的软件和功能，用户却不知道怎么使用？

这个时候就需要一个引导页来引导用户去操作，所以今天就给大家推荐一个简单易上手的引导插件——Intro.js

Intro.js

介绍

Intro.js 是一个开源普通轻量级的 Javascript / CSS 库，用于添加分步介绍或提示。只有 10kB 并且没有外部依赖！

不仅提供了自定义选项，可以控制引导窗口的外观和行为。还可以设置样式、主题和动画效果，以及自定义事件和回调函数，以便在引导的不同阶段执行自定义操作

安装使用

使用npm安装

npm install intro.js --save

引入intro方法和样式

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

安装 Introjs 后，有两种方法可以实现引导样式

方法一：使用html

将data-intro和data-step属性添加到 HTML 元素中；然后调用 introJs().start()

<div data-title="Welcome!" data-intro="Hello World! 👋" class="card-demo">
  <div class="card shadow--md">
    <div class="card__image" data-intro="Intro.js can highlight on elements">
      <img
        src="..."
        alt="Image alt text"
        title="Logo Title Text 1"
      />
    </div>
    <div class="card__body" data-title="Farewell!" data-intro="And this is the last step!">
      <h4>Quaco Lighthouse</h4>
      <small>
        The Quaco Head Lighthouse is a well maintained lighthouse close to St.
        Martins. It is a short, beautiful walk to the lighthouse along the
        seashore.
      </small>
    </div>
  </div>
</div>

const introJs = intro();
introJs().start();

HTML中可配置如下属性属性：

data-intro：步骤的提示文本
data-step：（可选）定义步骤的编号（优先级）
data-tooltipClass：（可选）为提示定义CSS类
data-highlightClass：（可选）将CSS类附加到helperLayer
data-position：定义提示的位置，top，left，right，bottom，bottom-left-aligned（同bottom）， bottom-middle-aligned，bottom-right-aligned或auto（检测元件的位置，并自动分配正确的位置）。默认是bottom
data-scrollTo：滚动到的元素，element或tooltip。默认值为element。

方法二：使用 JSON 定义

在setOptions里面加入需要引导的dom节点

introJs().setOptions({
  steps: [{
    title: 'Welcome',
    intro: 'Hello World! 👋'
  },
  {
    element: document.querySelector('.card-demo'),
    intro: 'This step focuses on an image'
  },
  {
    title: 'Farewell!',
    element: document.querySelector('.card__image'),
    intro: 'And this is our final step!'
  }]
}).start();

Intro.js 会自动查找工具提示的最佳位置，但也可以使用配置 position 显式定义每个步骤的工具提示位置

introJs().setOptions({
  steps: [
  {
    element: document.querySelector('.card-demo'),
    intro: 'Tooltip has position right',
    position: 'right'
  },
  ]
}).start();