首页 >web前端 >Vue.js >浅析vue项目中如何使用Intro.js实现用户指引功能

浅析vue项目中如何使用Intro.js实现用户指引功能

青灯夜游
青灯夜游转载
2022-11-29 20:55:174509浏览

vue项目中怎么实现用户指引功能?下面本篇文章给大家介绍一下在vue项目中使用Intro.js实现用户指引功能的方法,希望对大家有所帮助!

浅析vue项目中如何使用Intro.js实现用户指引功能

系统发布新版本或者上线新功能后,为方便用户快速了解新功能,通常需要添加一些用户指引界面。

常见的用于实现用户指引的插件有:Intro.jsShepherdvue-tourDriver.js等。这些插件各有利弊,本文将基于vue项目介绍如何使用Intro.js实现用户指引。【学习视频分享:vue视频教程web前端视频

什么是Intro.js

Intro.js 是一个开源的 Javascript / CSS 库,用于添加分步介绍或提示。具备如下优点:

  • 无依赖:不需要其他任何依赖项。
  • 小且快:文件体积小,引导过程流畅。其中,JavaScript文件的整体大小为10KB, CSS为2.5KB。
  • 用户友好:提供了多个主题,可根据个人喜好选择使用。
  • 浏览器兼容性:兼容所有主流的浏览器,包括:Chrome、Firefox、Opera、Safari和IE浏览器。
  • 文档完善:文档中包含了要介绍的每个元素的内容及示例。

API  &  options

Intro.js可以实现tour(显式指引)和hint(隐式指引)两种用户指引形式(注:这两种译法是笔者自己取的,仅用于区分!!!)。

其中,显示指引更倾向于是对功能的简要介绍,其效果如下图所示,通常是由遮罩层、选中的页面元素、指引信息弹窗等共同组成。

image.png

隐式指引,则像是一种操作式的引导,鼓励用户参与其中,边学边用,其默认效果如下图所示,提示用户点击指定元素,随后会显示相应的提示信息或进入下一步操作等。

image.png

image.png

这两种形式的用法核心在于选择元素并预设指引信息。因此,本文将主要介绍tour的用法,hint的使用方法可以触类旁通,参考tour的用法及 官方文档中的demo 后可以轻松上手,便不在此赘述。

Tour API

Intro.js官方提供了很多Tour API,这里仅针对最常用的基础API做介绍,完整的API介绍可查看官方API文档

introJs([targetElm])

用于创建一个 introJs 的对象,可选参数 targetElm 是一个字符串类型,指开始指引的特定元素,例如:“#intro-farm”。

introJs.start()

开始介绍定义的元素,即就是开始用户指引。

introJs.setOptions(options)

为已创建的 introJs 对象设置一组选项。参数 options 是一个对象类型,包括了指引中的所有信息,如:按钮显示文字、遮罩层透明度、提示文本等。

Tour options

常用option如下:

  • nextLabel:下一个的按钮文字
  • prevLabel:上一个按钮文字
  • skipLabel:跳过指引的按钮文字
  • doneLabel:完成按钮的文字
  • hidePrev:是否在第一步中隐藏“上一步”按钮;不隐藏,将呈现为一个禁用的按钮
  • hideNext:是否在最后一步中隐藏“下一步”按钮(同时会隐藏完成按钮);不隐藏,将呈现为一个禁用的按钮
  • exitOnEsc:点击键盘的ESC按钮是否退出指引
  • exitOnOverlayClick:点击遮罩层时是否退出介绍
  • showStepNumbers:是否显示步骤编号
  • disableInteraction:是否禁用高亮显示框内元素的交互
  • showBullets:是否显示面板的指示点
  • overlayOpacity:遮罩层的透明度 0-1之间
  • helperElementPadding:选中的指引元素周围的填充距离
  • steps:引导框内的相关参数配置,具体配置见下文

上述部分字段对应的内容如下图所示,更多完整options可查看 官方文档

image.png

其中,doneLable 只会在最后一步指引中出现,会占据 nextLabel 的位置,因此,如果 hideNext 置为true时,最后一步中 nextLabeldoneLabel 均会被隐藏。

helperElementPadding 是图中高亮区域中白色边框部分(为区分该字段对应区域,这里特意给所选元素一个粉色的背景色)。

安装

Intro.js没有任何依赖项,只需要安装intro.js即可。

  • 使用npm:
npm install intro.js --save
  • 使用yarn
yarn add intro.js
  • Git
git clone https://github.com/usablica/intro.js.git

使用

方式一

如果用户指引内容比较简单并且固定,可以直接将属性写在html标签中,并调用introJs().start()。主要属性如下:

  • data-title:标题文字
  • data-intro:提示信息内容
  • data-step:步骤的编号(优先级)
  • data-tooltipClass:为提示定义CSS类
  • data-highlightClass:将CSS类附加到helperLayer
  • data-position:提示的位置,默认是bottom
  • data-scrollTo:滚动到的元素,element或tooltip。默认值为element。
  • data-disable-interaction:是否禁用与突出显示的框内的元素的交互
<template>
    <div data-title="Welcome!" data-intro="Hello World!">
        hello!
    </div>
</template>

<script>
import introJs from "intro.js"; // 引入intro.js
import "intro.js/introjs.css"; // intro.js的基础样式文件

export default {
    mounted () { 
        this.$nextTick(() => { 
            // Intro.js扫描页面并找到所有具有“data intro”属性的元素
            introJs().start();
        }) 
    }
}
</script>

方式二

当页面需要配置较多步骤或有特殊化配置时,可以采用第二种种方式。需要在JSON中自定义配置,即通过使用API -- introJs.setOptions(options)。

1、封装introConfig.js

实际使用过程中,可能会有多个场景需要做用户指引。为避免重复多次配置一些基础的选项内容,可以将基础项封装到一个公共的文件introConfig.js中,文件内容如下:

// src/utils/introConfig.js

import introJs from "intro.js";
import "intro.js/introjs.css"; // intro.js的基础样式文件
import "intro.js/themes/introjs-modern.css"; // 主题样式文件

const intro = introJs();

intro.setOptions({
  nextLabel: "下一步", // 下一个的按钮文字
  prevLabel: "上一步", // 上一个按钮文字
  skipLabel: "跳过", // 跳过指引的按钮文字
  doneLabel: "完成", // 完成按钮的文字
  hidePrev: false, // 是否在第一步中隐藏“上一步”按钮;不隐藏,将呈现为一个禁用的按钮
  hideNext: false, // 是否在最后一步中隐藏“下一步”按钮(同时会隐藏完成按钮);不隐藏,将呈现为一个禁用的按钮
  exitOnEsc: false, // 点击键盘的ESC按钮是否退出指引
  exitOnOverlayClick: false, // 点击遮罩层时是否退出介绍
  showStepNumbers: false, // 是否显示步骤编号
  disableInteraction: true, // 是否禁用高亮显示框内元素的交互
  showBullets: true, // 是否显示面板的指示点
  overlayOpacity: 0.7, // 遮罩层的透明度 0-1之间
  helperElementPadding: 10, // 选中的指引元素周围的填充距离
});

export default intro;

另外,Intro.js官方总共提供了6个不同的主题:Classic、Royal、Nassim、Nazanin、Dark、Modern,各主题的显示效果可在 官网查看。默认使用的是Classic,如果想使用其他主题,需引入 “intro.js/themes” 文件下对应的css文件,如下图。这里我用的是 “introjs-modern.css”。

主题结构.png

2、引入配置文件

在需要添加用户指引的文件中引入introConfig.js文件:

import intro from "@/utils/introConfig.js";

3、配置指引步骤并启动

在具体的使用文件中,通过 setOptions 的 steps属性配置指引步骤,它是数组类型,每一项都对应一个指引步骤,其中的字段含义如下:

element:定位到相应的元素位置,如果不设置,则默认展示在屏幕中央

title:指引弹窗的标题

intro:指引弹窗的文本内容,可插入html内容

示例如下:

methods: {
    guide() {
        intro.setOptions({
            steps: [
              {
                element: document.querySelector(&#39;#step1&#39;), // 定位到相应的元素位置,如果不设置element,则默认展示在屏幕中央
                title: &#39;Welcome&#39;, // 标题
                intro: &#39;Hello World! ?&#39; // 内容
              },
              {
                element: document.querySelector(&#39;#step2&#39;),
                intro: &#39;有关如何配置/自定义该项目的指南和方法,请查看vue-cli文档。&#39;
              },
              {
                element: document.querySelector(&#39;#step3&#39;),
                intro: &#39;已安装的cli插件&#39;
              },
              {
                element: document.querySelector(&#39;#step4&#39;),
                intro: &#39;基本链接&#39;
              },
              {
                element: document.querySelector(&#39;#step5&#39;),
                intro: &#39;生态系统&#39;
              },
              {
                title: "开始体验吧!",
                intro: `<img src="interesting.GIF" alt="" style="width: 100%;margin: auto" class="specialImg"/>`
              },
            ]
      });
      this.$nextTick(() => {
        intro.start();
      })
    }
},
mounted() {
    this.$nextTick(() => {
        this.guide();
    })
}

上述代码中,guide() 方法里配置了指引步骤和开始指引;并在 mounted 生命周期中调用 guide() 方法以展示指引内容。需要注意的是,为确保指引信息在原始页面渲染完毕后调用,需要在 $nextTick() 中调用 guide() 方法。

4、Demo效果

本demo仅用作讲解如何使用Intro.js,并未修改原始样式,比较简陋,还请包涵,实际使用时需要根据实际需要自定义样式。点击查看demo代码,效果如下图:

Gif_339.gif

注意事项

  • 必须在原始页面渲染完毕后再加载intro.js

    如果原始界面没有完全渲染完毕,可能存在intro.js无法找到指定元素的情况,可通过this.$nextTick()解决

  • 实际使用中可能存在一些复杂的交互场景,可借助一些API来解决

    introJs.onexit(providedCallback):退出用户指引时触发 introJs.onchange(providedCallback):步骤改变时触发 introJs.onbeforechange(providedCallback):步骤改变前触发 introJs.onafterchange(providedCallback):步骤改变后触发

  • 如果现有主题无法满足需求,可以通过设置tooltipClass来自定义样式

(学习视频分享:web前端开发编程基础视频

以上是浅析vue项目中如何使用Intro.js实现用户指引功能的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文转载于:juejin.cn。如有侵权,请联系admin@php.cn删除