文章目录
2024 年 drive.js 的基础使用
安装就跳过了 npm install driver.js
,一行代码就可以搞定
基础使用的截图如下:
想在下一步的时候处理些逻辑呢?(同步)
比方说我现在在第一步,点击下一步之前,我想处理些东西!
官网的 api 说明点我跳转
Element 的各种选择器
用法跟 document.querySelector()
很类似啊
我觉的比较有用的是这个 a标签
的选择器,因为需求会比较多吧,官网的 api 点我
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
const driverObj = driver({
showProgress: true,
steps: [
{ element: '#tour-example', popover: { title: 'Animated Tour Example', description: 'Here is the code example showing animated tour. Let\'s walk you through it.', side: "left", align: 'start' }},
{ element: 'code .line:nth-child(1)', popover: { title: 'Import the Library', description: 'It works the same in vanilla JavaScript as well as frameworks.', side: "bottom", align: 'start' }},
{ element: 'code .line:nth-child(2)', popover: { title: 'Importing CSS', description: 'Import the CSS which gives you the default styling for popover and overlay.', side: "bottom", align: 'start' }},
{ element: 'code .line:nth-child(4) span:nth-child(7)', popover: { title: 'Create Driver', description: 'Simply call the driver function to create a driver.js instance', side: "left", align: 'start' }},
{ element: 'code .line:nth-child(18)', popover: { title: 'Start Tour', description: 'Call the drive method to start the tour and your tour will be started.', side: "top", align: 'start' }},
{ element: 'a[href="/docs/configuration"]', popover: { title: 'More Configuration', description: 'Look at this page for all the configuration options you can pass.', side: "right", align: 'start' }},
{ popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }
]
});
driverObj.drive();
标签:description,title,driver,Drive,js,start,Api,popover
From: https://blog.csdn.net/u010263423/article/details/142466302