項目地址：https://github.com/jrainlau/s...
官方示例：https://jrainlau.github.io/sm...

Install

Smartour 被構建成了 umd 和 es module 模塊，允許用戶通過不同的方式引入。 

npm install smartour  

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

基本用法

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.' 
  }]) 

選項

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 事件。