vue中使用driver.js修改样式并添加重新演示功能

已于 2023-02-07 11:40:15 修改
阅读量3.2k 收藏 19
点赞数 2
分类专栏： vue driver.js 文章标签： vue.js 前端
于 2021-12-03 17:26:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aizenmoxiguan/article/details/121697231
版权

最近做了一个新项目有关于新手引导，这里选择driver.js在vue项目中使用
涉及样式修改，重新演示功能。
github地址: https://github.com/kamranahmedse/driver.js

1、下载安装

yarn add driver.js

2、引入

import Driver from 'driver.js' // 引入driver.js插件
import 'driver.js/dist/driver.min.css' // driver样式
import driverList from './driver' // 引入数据

3、定义

computed: {
    driver () {
      const driver = new Driver({
        animate: true, // 在更改突出显示的元素时设置动画
        allowClose: false, // 禁止点击外部关闭
        keyboardControl: false, // 禁止键盘控制
        stageBackground: '#fff', // 引导对话的背景色
        closeBtnText: '关闭', // 关闭文本
        overlayClickNext: false, // 蒙层点击是否执行下一步
        prevBtnText: '上一步', // 上一步文本
        nextBtnText: '下一步', // 下一步按钮标题
        doneBtnText: '确定', // 最后一步完成按钮展示文本
      })
      return driver
    },
  }

4、driverList数据

export default [
  {
    element: '#first', // 这是需要高亮的元素
    popover: { // 引导展示数据
      title: '标题', // 这是标题
      description: '<div class="step_two"><div class="step_first">1</div>第一步</div>', // 这里是内容，支持HTML字符串
      position: 'bottom-center' // 引导展示位置
    }
  },
  {
    element: '#second',
    popover: {
      title: '标题', // 这是标题
      description: '<div class="step_two"><div class="step_first">1</div>第二步</div>', // 这里是内容，支持HTML字符串
      position: 'bottom-center' // 引导展示位置，支持 top, left, bottom, right, center
    }
  },
  {
    element: '#third',
    popover: {
      title: '标题', // 这是标题
      description: '<div class="step_two"><div class="step_first">1</div>第三步</div>', // 这里是内容，支持HTML字符串
      position: 'bottom-center' // 引导展示位置，支持 top, left, bottom, right, center
    }
  },
  {
    element: '#fouth',
    popover: {
      title: '标题', // 这是标题
      description: '<div class="step_two"><div class="step_first">1</div>第四步</div>', // 这里是内容，支持HTML字符串
      position: 'bottom-center' // 引导展示位置，支持 top, left, bottom, right, center
    }
  },
]

5、页面元素

  <div class="slide">
        <div class="slide_part" id='first'>
          <i class="el-icon-user-solid" style='font-size: 30px'></i>
          <p>First</p>
        </div>
        <div class="slide_part"  id='second'>
          <i class="el-icon-s-tools" style='font-size: 30px'></i>
          <p>Second</p>
        </div>
        <div class="slide_part" id='third'>
          <i class="el-icon-picture" style='font-size: 30px'></i>
          <p>Third</p>
        </div>
        <div class="slide_part" id='fouth'>
          <i class="el-icon-s-cooperation" style='font-size: 30px'></i>
          <p>Fourth</p>
        </div>
      </div>

6、开始新手引导

this.driver.defineSteps(driverList)
this.driver.start()

在这里插入图片描述

7、修改样式

下面是UI设计新手引导样式，可见没有标题，只有下一步按钮，下面我们修改样式，隐藏标题，关闭按钮，上一步按钮
最终设计效果
检查元素发现，新手引导元素是建立在body下面，所以样式不能写在当前vue文件中的scoped中

<style lang="less">
div#driver-popover-item{  // 最外面样式
  border-radius: 0;
  padding: 0;
  // width: 260px;
  // height: 160px;
  div.driver-popover-title {
    display: none; // 隐藏标题
  }
  div.driver-popover-footer{
    display: flex!important;
    justify-content: center;
    margin-bottom: 20px;
    button.driver-close-btn {
      display: none; // 隐藏关闭按钮
    }
    .driver-btn-group{
      display: flex;
      justify-content: center;
      button.driver-prev-btn{
      display: none !important; // 隐藏上一步按钮
      }
      button.driver-next-btn {
        width: 74px;
        height: 34px;
        background: #345eef;
        color: #fff;
        text-shadow: none;
      }
    }
  }
  .driver-popover-description{ // 内容样式设置
    font-size: 14px;
    margin: 50px auto 29px;
    .step_two {
      display: flex;
      align-items: center;
      justify-content: center;
      .step_first{
        width: 20px;
        height: 20px;
        background: #345eef;
        border-radius: 50%;
        color: #fff;
        line-height: 20px;
        margin-right: 5px;
        text-align: center;
      }
    }
  }
}
</style>

在这里插入图片描述

8、结尾重新演示功能

到最后一步发现一个重新演示的功能，
在这里插入图片描述

        onReset: (e) =>{
          console.log('onReset', e)
        }, // 元素高亮，凸显关闭时
        onNext: (e) => {
          console.log('onNext', e)
        }, // 下一步需执行
        onPrevious: (e) => {
          console.log('onPrevious', e)
        }, // 上一步需执行

本来想使用onReset事件去实现这一功能，但是发现最后一步点击关闭和确定都会执行onReset事件，由此不能把重新演示当成关闭按钮去执行，所以接下来使用onPrevious去实现。

8.1、修改driverList.js文件

  只需要修改最后一个对象就可以了

{
    element: '#fouth',
    popover: {
      title: '标题', // 这是标题
      className: 'step_fourth', // 自定义类名设置
      description: '<div class="step_two"><div class="step_first">1</div>第四步</div>', // 这里是内容，支持HTML字符串
      position: 'bottom-center', // 引导展示位置，支持 top, left, bottom, right, center
      prevBtnText: '重新演示'
    }
  },

8.2、修改最后一步样式

  看driver的github就会发现每一个都可以设置指定的类名，我们设置自定义类名去修改最后一步引导样式

div#driver-popover-item.step_fourth div.driver-popover-footer {
  justify-content: space-between;
  width: 100%;
  span.driver-btn-group{
    width: 100%;
    display: flex;
    justify-content: space-around;
  button.driver-prev-btn{
    display: inline-block !important;
    width: 74px;
    height: 34px;
    background: #dfdfdf;
    color: #333;
    font-size: 12px;
    padding: 0;
    border-radius: 0;
    border: none;
  }
}
}

8.3实现代码

onPrevious: (e) => {
  this.driver.start(1); //可以指定新手引导从第几步开始
},

在这里插入图片描述

9、完整代码

driver.vue

<template>
  <div class="driver">
    <div class="dirver_main">
      <div class="slide">
        <div class="slide_part" id='first'>
          <i class="el-icon-user-solid" style='font-size: 30px'></i>
          <p>First</p>
        </div>
        <div class="slide_part"  id='second'>
          <i class="el-icon-s-tools" style='font-size: 30px'></i>
          <p>Second</p>
        </div>
        <div class="slide_part" id='third'>
          <i class="el-icon-picture" style='font-size: 30px'></i>
          <p>Third</p>
        </div>
        <div class="slide_part" id='fouth'>
          <i class="el-icon-s-cooperation" style='font-size: 30px'></i>
          <p>Fourth</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css' // driver样式
import driverList from './driver'
export default {
  computed: {
    driver () {
      const driver = new Driver({
        animate: true, // 在更改突出显示的元素时设置动画
        allowClose: false, // 禁止点击外部关闭
        keyboardControl: false, // 禁止键盘控制
        stageBackground: '#fff', // 引导对话的背景色
        closeBtnText: '关闭', // 关闭文本
        overlayClickNext: false, // 蒙层点击是否执行下一步
        prevBtnText: '上一步', // 上一步文本
        nextBtnText: '下一步', // 下一步按钮标题
        doneBtnText: '确定', // 最后一步完成按钮展示文本
        onReset: (e) =>{
          console.log('onReset', e)
        }, // 元素高亮，凸显关闭时
        onNext: (e) => {

        }, // Called when moving to next step on any step 下一步需执行
        onPrevious: (e) => {
          this.driver.start(1); //可以指定新手引导从第几步开始
        }, // Called when moving to next step on any step 上一步需执行
      })
      return driver
    },
  },
  mounted () {
    this.driver.defineSteps(driverList)
    this.driver.start()
  }
}
</script>
<style lang="less" scoped>
@headerHeight: 68px;
@color: #333;
.driver {
  width: 100%;
  height: 100%;
  background-color: #eee;
  .dirver_main{
    width: 100%;
    height: calc(100% - @headerHeight);
    .slide{
      width: 100%;
      height: 88px;
      background: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .slide_part{
        font-size: 14px;
        font-weight: 400;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
    }
    .main {
      .btn {
        width: 200px;
        height: 48px;
        background: #345eef;
        border-radius: 0;
        border: none;
        font-size: 16px;
      }
    }
  }
}
</style>
<style lang="less">
div#driver-popover-item{  // 最外面样式
  border-radius: 0;
  padding: 0;
  // width: 260px;
  // height: 160px;
  div.driver-popover-title {
    display: none; // 隐藏标题
  }
  div.driver-popover-footer{
    display: flex!important;
    justify-content: center;
    margin-bottom: 20px;
    button.driver-close-btn {
      display: none; // 隐藏关闭按钮
    }
    .driver-btn-group{
      display: flex;
      justify-content: center;
      button.driver-prev-btn{
      display: none !important; // 隐藏上一步按钮
      }
      button.driver-next-btn {
        width: 74px;
        height: 34px;
        background: #345eef;
        color: #fff;
        text-shadow: none;
        border: none;
        border-radius: 0;
      }
    }
  }
  .driver-popover-description{ // 内容样式设置
    font-size: 14px;
    margin: 50px auto 29px;
    color: #333;
    .step_two {
      display: flex;
      align-items: center;
      justify-content: center;
      .step_first{
        width: 20px;
        height: 20px;
        background: #345eef;
        border-radius: 50%;
        color: #fff;
        line-height: 20px;
        margin-right: 5px;
        text-align: center;
      }
    }
  } 
}
div#driver-popover-item.step_fourth div.driver-popover-footer {
  justify-content: space-between;
  width: 100%;
  span.driver-btn-group{
    width: 100%;
    display: flex;
    justify-content: space-around;
  button.driver-prev-btn{
    display: inline-block !important;
    width: 74px;
    height: 34px;
    background: #dfdfdf;
    color: #333;
    font-size: 12px;
    padding: 0;
    border-radius: 0;
    border: none;
  }
}
}

</style>

driverList.js完整代码

export default [
  {
    element: '#first', // 这是需要高亮的元素
    popover: { // 引导展示数据
      title: '标题', // 这是标题
      description: '<div class="step_two"><div class="step_first">1</div>第一步</div>', // 这里是内容，支持HTML字符串
      position: 'bottom-center' // 引导展示位置
    }
  },
  {
    element: '#second',
    popover: {
      title: '标题', // 这是标题
      description: '<div class="step_two"><div class="step_first">1</div>第二步</div>', // 这里是内容，支持HTML字符串
      position: 'bottom-center' // 引导展示位置，支持 top, left, bottom, right, center
    }
  },
  {
    element: '#third',
    popover: {
      title: '标题', // 这是标题
      description: '<div class="step_two"><div class="step_first">1</div>第三步</div>', // 这里是内容，支持HTML字符串
      position: 'bottom-center' // 引导展示位置，支持 top, left, bottom, right, center
    }
  },
  {
    element: '#fouth',
    popover: {
      title: '标题', // 这是标题
      className: 'step_fourth', // 自定义类名设置
      description: '<div class="step_two"><div class="step_first">1</div>第四步</div>', // 这里是内容，支持HTML字符串
      position: 'bottom-center', // 引导展示位置，支持 top, left, bottom, right, center
      prevBtnText: '重新演示'
    }
  },
]
夏子涵呀呀呀
关注
  • 2
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
vue.global.js，Vue.js 框架的核心文件之一
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局方法。例如，你可以使用这个文件来创建全局的 Vue 实例，定义全局组件，添加全局指令，以及访问全局的 mixin、过滤器、插件等。 具体来说，`vue.global.js` 文件定义了以下内容： 1. `Vue` 对象：全局范围的 Vue 构造函数，用于创建 Vue 实例。 2. 全局方法：如 `Vue.createApp`、`Vue.component`、`Vue.directive` 等，用于定义组件、指令等全局内容。 3. 全局属性：如 `Vue.config` 用于配置全局行为，`Vue.version` 用于获取 Vue 的版本号。 4. 全局混入：使用 `Vue.mixin` 可以在所有组件中混入指定的选项。 5. 全局过滤器：使用 `Vue.filter` 可以定义全局过滤器。 6. 全局插件：使用 `Vue.use` 可以注册
简单的在vue项目里面使用driver.js 引导模式
qq_45797421的博客
05-09 813
driver.js 引导模式的简单使用
vue里使用driver.js实现项目功能向导指引
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
03-06 2137
https://github.com/kamranahmedse/driver.js 是一个轻量级、无依赖的原生JavaScript引擎，在整个页面中驱动用户的注意力，强大的、高度可定制的原生JavaScript引擎，无外部依赖，支持所有主流浏览器。 突出显示单个元素 高亮和弹出窗口 定位弹出窗口 还可以使用offset属性为弹窗位置添加偏移量 创建功能介绍 功能介绍在新用户入门时很有用，可以让他们了解应用程序的不同部分。您可以使用驱动程序无缝创建它们。定义步骤，并在你想开始展示时调用start。用
用户引导插件driverjs的基本使用及弹窗样式修改
最新发布
qq_43641110的博客
03-28 1139
className：className用来包装driver.js弹出窗口animate：动画时改变突出显示的元素opacity：背景不透明度(0表示只有弹出窗口，没有覆盖)padding：元素到周围边缘的距离popoverOffset：弹窗与元素偏移距离allowClose：点击覆盖是否应该关闭showProgress：是否显示弹窗进度overlayClickNext：它应该移动到下一步叠加点击doneBtnText：最后一个按钮上的文本。
Vue项目基于driverjs实现新用户导航
前端知识分享喵
04-20 904
Driver.js 是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库。主要的作用是为刚接触应用的新手用户快速了解产品，帮助用户把注意力聚焦到某项功能，从而快速熟悉我们的开发的产品。它没有依赖项，支持所有主要浏览器。
Driverjs实现新用户指引
m0_64063429的博客
05-09 808
/ 高亮通过查询选择器指定的或步骤定义的元素。nextBtnText: 'Next', //当前步骤下一步按钮上的文本。<el-button id="first-ele" type="primary">首页</el-button>prevBtnText: 'Previous', // 当前步骤上一步按钮上的文本。onNext: (Element) => {}, // 任何步骤中移到到下一步时调用。
vue使用driver.js完成页面引导的功能
m0_58565372的博客
07-31 1912
四.引导页面里面引入steps.js，其引导页面完整代码。二.在自己需要引导的页面上引入driver.js。需求：给客户做一个页面引导，教客户怎么做。以上代码就能实现其页面引导的功能。三.在外部建一个steps.js。一.安装driver.js。
vue中关于driver.js使用
Anlittlecat的博客
10-16 641
报错1：Uncaught TypeError: driver_js__WEBPACK_IMPORTED_MODULE_0。报错2：TypeError: driver_js…lt is not a constructor。报错3：There are no steps defined to iterate。原因：当时直接下载的默认为最新版（1.30.）进行查看，本文使用的是0.9.8版本。
vue项目通过driver.js实现操作步骤指引
m0_50082421的博客
10-14 3075
driverjs
driver.js自定义用户引导样式
fyydashen的博客
04-06 1554
Driver.js 是一个强大的，轻量级，使用原生 JavaScript 引擎开发的库，用于在页面聚焦用户的关注点。它支持所有主流浏览器，并且可高度自定义。Driver.js 并不仅仅是一个指南性质的库，其用户场景非常广泛，能够用于任何需要为页面构建浮层的情况，譬如当用户需要与某些元素交互而隐藏其他元素的场景。功能特性使用简单，无外部依赖极轻量，约～4kb，原生 JavaScript 引擎开发API 功能强大，高度可定制可着重（突出）显示页面上的任何元素。
vue引导效果插件driver.js讲解
weixin_38912662的博客
01-12 994
在vue里使用driverjs做出引导效果
vue使用recorder.js实现录音功能
10-15
主要为大家详细介绍了vue使用recorder.js实现录音功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中使用viewer.js 插件预览图片
03-27
vue中使用viewer.js 插件预览图片
Vue中使用XgPlay.js播放 flv视频
01-22
Vue中使用XgPlay.js播放 flv视频
vue-fullpage.js-Vue.js的官方fullPage.js组件。-Vue.js开发
05-27
感谢VasiliyGryaznoy，dragg和Raphael Owino目录安装许可证使用选项方法使用Nuxt.js进行回调的用法贡献资源安装终端：//使用bower bower install vue-fullpage.js //使用npm npm install --save vue-fullpage .js...
vue 使用 driver.js 页面分步引导
zzzz121380的博客
08-23 1212
【代码】vue 使用 driver.js 页面分步引导。
在Vue项目中使用driver.js（页面分布引导）插件
郭宝的博客
08-27 4670
driver.js 是什么？ driver.js是一个轻量级、无依赖的页面分布引导插件。 GitHub源码 官方介绍及示例 driver.js 怎么使用？ 1、安装 npm install driver.js 2、局部引入 import Driver from 'driver...
页面分步引导组件Driver.js
绝圣弃智-零的博客
04-01 1557
Driver.js是一个轻量级（约4kb gzip），并且无任何依赖，但功能强大的JavaScript引擎。Driver.js可以提高用户对页面的关注度，，也可以创建强大的分步引导介绍功能，号召性用语组件，焦点移位器等。更重要的是Driver.js支持所有的主流浏览器。1、Driver.js安装，可以使用script标签引入，也可以使用npm安装，import引入。a、在html文件中用scrip...
基于driverjs实现Vue项目中的新用户导航
柯晓楠
05-26 1298
1. 效果演示 2. 依赖介绍 driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库。它没有依赖项，支持所有主要浏览器。 Driver.js官网地址：https://kamranahmed.info/driver.js/ GitHub地址：https://github.com/kamranahmedse/driver.js NPM安装依赖： npm i driver.js --save Yarn安装依赖： yarn add driver.js 在项目中引入依赖：
如何在vue中使用native.js
05-05
如果您想在Vue项目中使用Native.js，可以按照以下步骤： 1. 安装Native.js 您可以在npm上找到Native.js并安装它： ``` npm install native-js ``` 2. 在Vue组件中使用 在您的Vue组件中，您可以通过以下方式导入Native.js： ``` import Native from 'native-js'; ``` 然后，您可以使用Native.js提供的方法来实现您的功能，例如： ``` Native.callNativeMethod('methodName', params); ``` 这将调用原生方法并传递参数。 3. 在原生应用中实现Native.js方法 为了让Native.js方法在您的原生应用中工作，您需要在原生应用中实现这些方法。您可以使用平台提供的原生API来实现这些方法，例如在iOS中使用Objective-C或Swift，或在Android中使用Java或Kotlin。 您可以将这些原生方法封装在一个公共接口中，以便在JavaScript代码中轻松调用它们。 希望这可以帮助您在Vue项目中使用Native.js。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值