导航：首页 > 开发技术 >

怎么使用Smartour

发表于：2025-02-04 作者：千家信息网编辑

千家信息网最后更新 2025年02月04日，这篇文章主要讲解了"怎么使用Smartour"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"怎么使用Smartour"吧！InstallSmartour

千家信息网最后更新 2025年02月04日怎么使用Smartour

这篇文章主要讲解了"怎么使用Smartour"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"怎么使用Smartour"吧！

Install

Smartour 被构建成了 umd 和 es module 模块，允许用户通过不同的方式引入。

npm install smartour

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

基本用法

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: `            This is a html string
     
   ` })

插槽位置

插槽的位置可以选择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             Click here to occur an alert event        `,   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 // 遮罩层点击事件，默认为结束导览 }