Smartour 让网页导览变得更简单(推荐)

npm install smartour

/* ES Modules */
import Smartour from 'smartour/dist/index.esm.js'
/* CommandJS */
const Smartour = require('smartour')
/* <script> */
<script src="/UploadFiles/2021-04-02/index.js">

基本用法
Smartour 提供了一个非常简单的 API focus(), 这是高亮一个元素最简单的方式。


let tour = new Smartour()

tour.focus({
 el: '#basic-usage'
})


插槽 Slot
插槽 slot 是用于为高亮元素提供描述的 html 字符串。
纯字符串:


let tour = new Smartour()

tour.focus({
 el: '#pure-string',
 slot: 'This is a pure string'
})


Html 字符串


let tour = new Smartour()

tour.focus({
 el: '#html-string',
 slot: `
  <div>
   <p>This is a html string</p>
  </div>
 `
})


插槽位置
插槽的位置可以选择4个不同的方向: top, right, left, bottom.
设置 options.slotPosition 属性即可覆盖默认的 top 位置。


let tour = new Smartour()

tour.focus({
 el: '#slot-positions',
 slot: `top`,
 options: {
  slotPosition: 'top' // 默认为 `top`
 }
})


插槽事件
插槽所定义的元素也可以绑定事件。我们通过 keyNodes 属性来为插槽元素绑定事件。
keyNodes 是内容为一系列 keyNode 的数组。 属性 keyNode.el 是一个 css 选择器，而 keyNode.event 属性则是对应元素所绑定的事件。


let tour = new Smartour()

tour.focus({
 el: '.slot-events-demo',
 options: {
  slotPosition: 'right'
 },
 slot: `

   Click here to occur an alert event
  </button>

   Click here to occur an alert event
  </button>
 `,
 keyNodes: [{
  el: '.occur-1',
  event: () => { alert('Event!!') }
 }, {
  el: '.occur-2',
  event: () => { alert('Another event!!') }
 }]
})


Queue
有的时候页面需要不止一个导览。Smartour 允许你把一系列的导览通过 .queue() 放在一起，然后挨个挨个地展示它们。
举个例子:


let tour = new Smartour()

tour
 .queue([{
  el: '.li-1',
  options: {
   layerEvent: tour.next.bind(tour)
  },
  slot: 'This is the 1st line.'
 }, {
  el: '.li-2',
  options: {
   layerEvent: tour.next.bind(tour)
  },
  slot: 'This is the 2nd line.'
 }, {
  el: '.li-3',
  options: {
   layerEvent: tour.next.bind(tour)
  },
  slot: 'This is the 3rd line.'
 }])
 .run() // 别忘了调用 `run()` 方法去展示第一个导览


选项
Smartour 是一个构建函数，它接收一个 options 参数去覆盖其默认选项
让我们看看它的默认选项是什么样子的：


{
 prefix: 'smartour', // class 前缀
 padding: 5, // 高亮区域内边距
 maskColor: 'rgba(0, 0, 0, .5)', // 带透明值的遮罩层颜色
 animate: true, // 是否使用动画
 slotPosition: 'top' // 默认的插槽位置
 layerEvent: smartour.over // 遮罩层点击事件，默认为结束导览
}


APIs
除了 .focus()，.queue() 和 .run() API 以外，Smartour 还提供了另外三个 API 专门用于控制导览的展示。

  
.next()：展示下一个导览（只能配合 .queue() 使用）。
  
.prev()：展示上一个导览（只能配合 .queue() 使用）。
  
.over()：结束全部导览。

Smartour 的原理
Smartour 通过 element.getBoundingClientRect() api 来获取目标元素的宽高和位置信息，然后放置一个带着 box-shadow 样式的元素在其之上作为高亮区域。
由于点击事件无法再 box-shadow 的区域里触发，所以 Smartour 还放置了一个全屏透明的遮罩层用于绑定 layerEvent 事件。
高亮区域和插槽都被设置为 absolute。当页面滚动时，document.documentElement.scrollTop 或者 document.documentElement.scrollLeft 的值就会变化，然后 Smartour 会实时修正它的位置信息。
证书
MIT
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。