截图上传组件

简介

一个简单的引导插件. 支持事件钩子并跳过步骤. umd格式,可<script>和import引入使用.

Live Code

安装

js: npm i @redbuck/intro或yarn add @redbuck/intro

css: 位于@redbuck/intro/lib/intro.css

使用

const intro = new Intro(options)

options:

属性 | 类型 | 默认值|描述 --:|--:|--:|--: steps| Array | []|步骤 stepCount|Number|1|播放次数 storageKey|String|'intro_play_count'|标识播放次数

steps为一个成员为对象(step)的数组.对象必须包含el,text字段

其中,el字段应为DOM对象,或DOM对象组成的数组,或者是返回前述类型的函数.

引导窗将聚焦这个(些)DOM围合成的矩形. text字段将自动排布在剩余方向中,最大的一个.

实例支持浏览器事件风格绑定回调.

intro.on(event, callback)

支持事件

事件|参数|描述 --:|--:|--:| before-next|{step, next, skip}|下一步之前,传入下一步step对象,调用next以继续插件流程,也可以调用skip跳过该步骤 done|无|结束事件

示例

查看static/demo.html获取全部详情

const intro = new Intro({
  playCount: 3,
  steps: [
	{
	  el: $('#left'),
	  text: '点击这里,打开新世界大门!',
	},
	{
	// el can be on array
	  el: [$('#block1'), $('#block2'), $('#block3')],
	  text: '根据你想【赠送的奖励】,选择不同的活动类型',
	},
	{
	  el: $('#block4'),
	  text: '选择第5项活动',
	},
	{
	  el: $('#block6'),
	  text: '当你同时要赠送多种奖励时，请选择组合送吧！',
	},
	{
	  el: $('#item1'),
	  text: '点这里，可以查看和管理所有的活动1',
	},
	{
	  el: $('#item2'),
	  text: '点这里，可以查看和管理所有的活动2',
	},
	{
	  el: $('#item3'),
	  text: '点这里，可以查看和管理所有的活动3',
	},
	{
	  el: $('#item4'),
	  text: '点这里，可以查看和管理所有的活动4',
	},
	{
	  el: $('#item5'),
	  text: '点这里，可以查看和管理所有的活动5',
	},
  ],
})

// if you did not listen this event, intro will auto next
intro.on('before-next', async ({step, next, skip}) => {
  // do something
  console.log('before-next', step)
  // continue this step
  if (step.el) {
	next()
  }
  // you can skip this step
  else {
	skip()
  }
})