easy-intro v0.0.6

easy-intro

介绍 English

easy-intro 用于在web页面中，添加一组 引导。 通常用来介绍页面的 功能 向用户介绍页面的大致布局和功能概括； 或者 引导操作 引导用户完成首次操作体验，类似游戏中的新手指引。 通过这种方式，降低用户的学习成本和操作成本。

Example

安装

NPM

npm install easy-intro -S

Yarn

yarn add easy-intro -S

API

The introObj is an Object.

用法

通过插件的形式，在已有的dom元素上添加引导蒙层。

// example.js
import { addIntro, addIntros, removeAllIntro } from "easy-intro";

// Start the introduction for single defined element
const removeIntroItem = addIntro({
  el: document.getElementById('button'),  // 已经出现在dom上的目标元素
  desc: 'Click Me!', // 引导描述
  realClick: true,  // 该元素是否真的被点击（即按钮的click事件是否触发）
  hint: true, // 是否显示引导点击的动画效果
})

// remove this introduction
removeIntroItem();

// Start the introduction for defined elements.
addIntros([
  {
    el: document.getElementById('step-1'),
    desc: 'First Step! click me!',
    realClick: false,
    hint: false,
  },
  {
   el: document.getElementById('step-2'),
   desc: 'Second Step! click me!',
   realClick: false,
   hint: false,
   },
   {
   el: document.getElementById('step-3'),
   desc: 'Third Step! click me!',
   realClick: false,
   hint: false,
   }
]);

// remove All introductions
removeAllIntro();