首页 > 其他分享 >Drive.js 的一些 Api 使用记录

Drive.js 的一些 Api 使用记录

时间:2024-09-24 15:48:48浏览次数:10  
标签:description title driver Drive js start Api popover

文章目录


2024 年 drive.js 的基础使用

安装就跳过了 npm install driver.js ,一行代码就可以搞定

官网的 Basic Usage

基础使用的截图如下:

在这里插入图片描述


想在下一步的时候处理些逻辑呢?(同步)

比方说我现在在第一步,点击下一步之前,我想处理些东西!
官网的 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

相关文章

  • 找到一个免费开源APP,自动搭载影像数据、地名地址API等
    找到一个免费的开源APP,代码全开源,APP里也自动搭载了影像数据API、地名地址API还有一些天气及算法API。扒了一个具体操作的教程,供大家参考。APP自助开发教程1、进入星图云开发者平台,点击登录,登录后完成开发者认证2、点击进入星图云开发者平台自助开发模块,选择APP,点击立即开始......
  • AT_jsc2021_g Spanning Tree 题解
    感觉自己稍微有一点唐了。思路我们首先可以把一定要连的边连起来。这样就变成了一个无向图生成树计数问题。如何求解。使用矩阵树定理!我们可以求出基尔霍夫矩阵,然后跑一遍行列式就可以了。时间复杂度:\(O(n^3)\)。Code#include<bits/stdc++.h>usingnamespacestd;con......
  • 【Vue】【uni-app】【小程序】多层嵌套方法导致this指向出错:解析 JSON 失败: TypeErro
    项目场景:在使用vue+uni-app开发微信小程序的时候,调试报错:解析JSON失败:TypeError:Cannotreadproperty‘push’ofundefined问题描述报错如下:以下是出问题的代码:data(){return{fileLists:[],}}//上传文......
  • 【组件】前端js HEIC/HEIF 转换为JPEG、PNG或GIF格式 苹果格式
    【组件】前端jsHEIC/HEIF转换为JPEG、PNG或GIF格式Heic2any:Client-sideconversionofHEIC/HEIFimagefilestoJPEG,PNG,orGIFinthebrowser.https://alexcorvi.github.io/heic2any/#demoGitHub-alexcorvi/heic2any:ConvertingHEIF/HEIFimageformatstoPNG/GIF/J......
  • asp.net core webapi 获取请求头token
    usingMicrosoft.AspNetCore.Mvc;usingMicrosoft.Extensions.Primitives;usingSystem.Collections.Generic;[ApiController][Route("[controller]")]publicclassMyController:ControllerBase{[HttpGet]publicIActionResultGet(){......
  • 基于SqlAlchemy+Pydantic+FastApi的Python开发框架
    随着大环境的跨平台需求越来越多,对与开发环境和实际运行环境都有跨平台的需求,Python开发和部署上都是跨平台的,本篇随笔介绍基于SqlAlchemy+Pydantic+FastApi的Python开发框架的技术细节,以及一些技术总结。最近这几个月一直忙于Python开发框架的整合处理,将之前开发框架中很多重要......
  • Vue.js与Flask/Django后端配合
    Vue.js是一个流行的前端JavaScript框架,而Flask和Django是常用的Python后端框架。以下是关于Vue.js与Flask或Django后端配合的介绍:一、Vue.js的特点与优势Vue.js具有以下主要特点和优势:渐进式框架:可以根据项目需求逐步引入和扩展功能。响应式数据绑定:自动更......
  • hCaptcha 协议识别 API 对接说明
    hCaptcha协议识别API对接说明本文将介绍一种hCaptcha协议识别API对接说明,它可让用户无需识别和点选hCaptcha验证码图片,仅需通过提交WebsiteKey即可实现后台自动解码,完成验证。接下来介绍下hCaptcha协议识别API的对接说明。注册试用链接注册试用链接申......
  • VS Code远程调试Nodejs项目
    本文介绍了如何配置VSCode进行远程开发,包括在Ubuntu环境中开启SSH服务,Windows上安装RemoteDevelopment插件,以及设置VSCode进行远程Node.js项目的断点调试。此外,还详细讲解了在Windows和Linux之间设置SSH免密登录的步骤,通过生成秘钥对并将其添加到Linux的authorized_keys文件中,实......
  • JSON处理工具类
    JSON处理工具类importorg.json.JSONArray;importorg.json.JSONObject;importjava.util.ArrayList;importjava.util.List;/***JSON处理工具类*/publicclassJsonUtils{/****将json字符串转为map*@paramjson*@returnjava.util.Map<......