easy-intro

介绍 English

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

Example

安装

NPM

npm install easy-intro -S

Yarn

yarn add easy-intro -S

API

API	param	return	description
addIntro	introObj	function	为单个元素添加引导（通常引导用户点击按钮，产生真实的效果） , 返回一个函数用于移除该引导
addIntros	[introObj]	void	添加一组引导，通常用于功能介绍
removeAllIntro		void	移除所有的引导元素

The introObj is an Object.

property	type	default	description
el	DOM element	null	已经出现在dom上的目标元素
desc	String	""	引导描述
realClick	Boolean	true	该元素是否真的被点击（即按钮的click事件是否触发）
hint	Boolean	true	是否显示引导点击的动画效果

用法

通过插件的形式，在已有的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();