項(xiàng)目地址：https://github.com/jrainlau/s...
官方示例：https://jrainlau.github.io/sm...
Install
Smartour 被構(gòu)建成了 umd 和 es module 模塊，允許用戶通過(guò)不同的方式引入。
- 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 提供了一個(gè)非常簡(jiǎn)單的 API focus(), 這是高亮一個(gè)元素最簡(jiǎn)單的方式。
- 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個(gè)不同的方向: top, right, left, bottom.
設(shè)置 options.slotPosition 屬性即可覆蓋默認(rèn)的 top 位置。
- let tour = new Smartour()
- tour.focus({
- el: '#slot-positions',
- slot: `top`,
- options: {
- slotPosition: 'top' // 默認(rèn)為 `top`
- }
- })
插槽事件
插槽所定義的元素也可以綁定事件。我們通過(guò) keyNodes 屬性來(lái)為插槽元素綁定事件。
keyNodes 是內(nèi)容為一系列 keyNode 的數(shù)組。 屬性 keyNode.el 是一個(gè) css 選擇器，而 keyNode.event 屬性則是對(duì)應(yīng)元素所綁定的事件。
- 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
有的時(shí)候頁(yè)面需要不止一個(gè)導(dǎo)覽。Smartour 允許你把一系列的導(dǎo)覽通過(guò) .queue() 放在一起，然后挨個(gè)挨個(gè)地展示它們。
舉個(gè)例子：
- 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.'
- }])
選項(xiàng)
Smartour 是一個(gè)構(gòu)建函數(shù)，它接收一個(gè) options 參數(shù)去覆蓋其默認(rèn)選項(xiàng)。
讓我們看看它的默認(rèn)選項(xiàng)是什么樣子的：
- {
- prefix: 'smartour', // class 前綴
- padding: 5, // 高亮區(qū)域內(nèi)邊距
- maskColor: 'rgba(0, 0, 0, .5)', // 帶透明值的遮罩層顏色
- animate: true, // 是否使用動(dòng)畫(huà)
- slotPosition: 'top' // 默認(rèn)的插槽位置
- layerEvent: smartour.over // 遮罩層點(diǎn)擊事件，默認(rèn)為結(jié)束導(dǎo)覽
- }
APIs
除了 .focus()，.queue() 和 .run() API 以外，Smartour 還提供了另外三個(gè) API 專門用于控制導(dǎo)覽的展示。
.next()：展示下一個(gè)導(dǎo)覽（只能配合.queue()使用）。.prev()：展示上一個(gè)導(dǎo)覽（只能配合.queue()使用）。.over()：結(jié)束全部導(dǎo)覽。
Smartour 的原理
Smartour 通過(guò) element.getBoundingClientRect() api 來(lái)獲取目標(biāo)元素的寬高和位置信息，然后放置一個(gè)帶著 box-shadow 樣式的元素在其之上作為高亮區(qū)域。
由于點(diǎn)擊事件無(wú)法再 box-shadow 的區(qū)域里觸發(fā)，所以 Smartour 還放置了一個(gè)全屏透明的遮罩層用于綁定 layerEvent 事件。
