Driver.js使用指南

这篇具有很好参考价值的文章主要介绍了Driver.js使用指南。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Driver.js使用指南

备注: 本人使用版本"driver.js": “^1.3.1”

import {driver} from 'driver.js';
import 'driver.js/dist/driver.css';
import {DriveStep} from 'driver.js';
import {Config} from 'driver.js';

export default driver;
// 根据业务进行的封装
export const driverStep = function (steps: DriveStep[] = [], onceKey?: string, options: Config = {}) {
    const obj = {
        smoothScroll: false,
        allowClose: false,
        stagePadding: 0,
        // showButtons: [
        //   "previous",
        //   'next',
        //   "close"
        // ],
        progressText: "{{current}}/{{total}}",
        nextBtnText: '下一条',
        prevBtnText: '上一条',
        doneBtnText: '我知道啦',
        // showProgress: true,
        steps,
        ...options
    } as Config
    if (steps.length <= 1) {
        obj.showButtons = ["next"];
    }
    const driverObj = driver(obj);
    driverObj.drive();
    return driverObj;
};

@import 'driver.theme.less';
body {
  @primary-color: #4c70fe;
  .driver-popover {
    background-color: @primary-color;
    color: white;
  }
  .driver-popover-footer {
    margin-top: 28px;
  }
  .driver-popover .driver-popover-title {
    font-size: 20px;
  }
  .driver-popover .driver-popover-title,
  .driver-popover .driver-popover-description,
  .driver-popover .driver-popover-progress-text {
    color: white;
  }
  .driver-popover button {
    background-color: white;
    color: @primary-color;
    padding: 7px 16px;
    border: none;
  }
  .driver-popover button:focus,
  .driver-popover button:hover {
    // opacity: 0.8;
  }
  .driver-popover .driver-popover-navigation-btns {
    justify-content: flex-end;
    gap: 3px;
  }
  .driver-popover .driver-popover-close-btn {
    visibility: hidden;
    color: white;
    background-color: transparent;
    padding: 0;
    right: -5px;
    top: -5px;
    font-size: 13px;
  }
  // .driver-popover .driver-popover-close-btn:hover {
  //   color: #000;
  // }
  .driver-popover .driver-popover-arrow-side-left.driver-popover-arrow {
    border-left-color: @primary-color;
  }
  .driver-popover .driver-popover-arrow-side-right.driver-popover-arrow {
    border-right-color: @primary-color;
  }
  .driver-popover .driver-popover-arrow-side-top.driver-popover-arrow {
    border-top-color: @primary-color;
  }
  .driver-popover .driver-popover-arrow-side-bottom.driver-popover-arrow {
    border-bottom-color: @primary-color;
  }
  *[aria-controls='driver-popover-content'] {
    &:after {
      content: '';
      position: absolute;
      border: 1px dashed white;
      border-radius: 8px;
      width: 100%;
      height: 100%;
      padding: 18px;
      box-sizing: content-box;
      left: -19px;
      top: -19px;
    }
  }
  .driver-dom {
    z-index: 10001;
  }
  button.driver-popover-prev-btn {
    background-color: transparent;
    border: 1px solid white;
    color: white;
    text-shadow: none !important;
    &:hover,
    &:focus {
      background-color: transparent;
      color: white;
    }
  }
}

使用example文章来源地址https://www.toymoban.com/news/detail-815462.html

const driverObj = driverStep([
            {
                element: '#zero-step',
                popover: {
                    description: '',
                    side: 'bottom',
                    align: 'center',
                    onNextClick: () => {
                        driverObj.moveNext()
                    }
                },
            },
            ...,
        ]);

到了这里,关于Driver.js使用指南的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 完整指南:如何使用 Node.js 复制文件

    文件拷贝指的是将一个文件的数据复制到另一个文件中,使目标文件与源文件内容一致。 Node.js  提供了文件系统模块 fs,通过该模块可以访问文件系统,实现文件操作,包括拷贝文件。 在 Node.js 中,有几种常用的方法可以用来实现文件拷贝: 1.使用 fs.copyFile()  Node.js v8.5.

    2024年02月07日
    浏览(50)
  • Node.js 版本管理工具 n 使用指南

    Node.js 版本更新很快,目前 node v20.x 已经发布,我们在使用时避免不了会需要切换不同的 Node.js 的版本来使用不同版本的特性。 所以就出现了像 windows 上的 nvm ,MacOS 上的 n 工具,本文就介绍一下如何使用 n 管理 Node.js 的版本。 使用 Brew 安装时,未安装可以参考 Brew 官网安装

    2024年02月16日
    浏览(55)
  • JS小知识,Intersection Observer API 使用指南

    使用Intersection Observer API在JavaScript中实现懒加载,无限滚动等功能,而不需要使用复杂的逻辑或导致性能问题。 Intersection Observer API 用于异步观察元素与浏览器视口的交集变化。它使得检测元素的可见性,或者两个元素的相对可见性变得容易,而不会使网站变得缓慢并降低用

    2024年02月03日
    浏览(34)
  • 小程序开发:开发框架与工具的使用指南

    本文以微信小程序为例介绍了小程序开发框架与工具的使用,通过本文的阅读,相信大家能够简单了解小程序开发的基本流程和常用工具,从而快速上手小程序开发。 1.1 小程序开发框架 小程序开发框架是一套用于快速构建小程序的开发框架,提供了丰富的组件和API,使得开

    2024年02月14日
    浏览(51)
  • Dataphin使用指南与开发流程

    相对前台与后台 相比数据仓库而言 数据仓库以数据为驱动自下而上设计 数据中台以业务为驱动 自上而下设计 数据仓库和传统的数据平台,其出发点为一个支撑性的技术系统,即一定要先考虑我具有什么数据,然后我才能干什么,因此特别强调数据质量和元数据管理;而数

    2024年02月16日
    浏览(38)
  • Claude 使用指南 | 可与GPT-4媲美的语言模型

    本文全程干货,让你轻松使用上claude,这也是目前体验cluade的唯一途径!废话不多说,直接上教程,cluade的能力不逊于GPT4,号称是 ChatGPT4.0最强竞品 。相对Chatgpt来说,Claude不仅是完全免费的,而且注册流程更为简单,还支持发文件等Chatgpt不具备的功能。功能强大且免费就显

    2024年02月09日
    浏览(36)
  • 使用Go语言处理Excel文件的完整指南

    xcel文件是广泛用于存储和处理数据的常见文件格式。在Go语言中,有许多库和工具可用于处理Excel文件。本文将介绍如何使用Go语言处理Excel文件,包括读取、写入和修改Excel文件,以及处理单元格、行和列等操作。无论是从头开始创建Excel文件,还是从现有文件中提取数据,本

    2024年01月18日
    浏览(61)
  • (笔记)googletest在C语言项目中的使用指南

    参考: 关于EXPECT_CALL 关于TEST的断言宏 关于gtest的C语言封装 gtest+stub打桩 stub工具源码:https://github.com/coolxv/cpp-stub/tree/master/src C语言的项目需要做单元测试(需要满足基本的测试,如返回值,字符串比较等) 涉及多个模块的交互(需要做隔离,打桩,自制输入) 实现打桩,函

    2024年02月01日
    浏览(35)
  • 使用Node.js手撸一个建静态Web服务器,内部CV指南

    文章里有全部代码,也可以积分下载 操作步骤如上图 文章结束 话说这个键盘真漂亮~~ 1.1 静态Web服务器概念 我们通常称 静态Web服务器 为 静态网站 ,其主要特征就是服务器上的所有内容都是现成的,不需要后端做额外的处理。当我们向静态服务器发送网页请求时,服务器只

    2023年04月08日
    浏览(50)
  • Go语言变量使用指南:声明、类型转换与字符串操作

    深入了解Go语言中变量的声明方式、字符和布尔类型的细节、字符串的不可变性以及基本数据类型之间的转换规则。

    2024年02月10日
    浏览(90)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包