Vue プロジェクトは、driverjs に基づいて新しいユーザー ナビゲーションを実装します。

ガイド ページは、ユーザーが初めてシステムを起動するとき、または手動で起動するときに、出口がどこにあるのか、メニューがどこにあるのか、その他の対応する操作など、現在のシステムのモジュールを導入するようにユーザーに促します。

APP の開発でも Web アプリケーションの開発でも、初心者向けの指導は非常に一般的な要件であり、一般に、初心者向けの指導は次の 2 つの側面で必要です。

1. ユーザーが初めてアプリケーションを開いたときのインターフェイスに慣れていない、または革新的な製品であるため、ほとんどのユーザーは同様の経験をしていません

2. 成熟したアプリケーションに対して大幅なバージョン変更が行われ、UI レイアウトが比較的大きく変更されるため、ユーザーに通知するためのガイダンスが必要です

デジタル管理プラットフォーム
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue パーミッションシステム事例
個人ブログアドレス

1.1 ナビゲーションのデモ

1.2 Driver.js の概要

Driver.js は、ネイティブ JavaScript で開発された強力で高度にカスタマイズ可能な新規ユーザー オンボーディング ライブラリです。主な機能は、アプリケーションを初めて使用する初心者ユーザーが製品をすばやく理解し、ユーザーが特定の機能に集中できるようにし、開発された製品にすぐに慣れることです。依存関係はなく、すべての主要なブラウザをサポートします。

公式サイト：https://kamranahmed.info/driver.js/

github：https://github.com/kamranahmedse/driver.js

1.3 Driver.js の技術的特徴

• • シンプルで軽量: 非常に使いやすく、独立していて依存関係がなく、サイズはわずか 4kb
  • 高度なカスタマイズ可能: 豊富で強力な API を備え、オンデマンドで使用可能
  • 優れたインタラクティブなエクスペリエンス: アニメーションの移行をサポートし、スムーズで快適なエクスペリエンスを実現します。
  • 何かを強調表示: ページ上の任意の dom 要素の強調表示をサポートします。
  • 機能の紹介を実現するためのいくつかの簡単な手順: Web アプリケーションの優れた機能の紹介を作成すると、優れたエクスペリエンスが得られます。
  • ユーザーフレンドリー: ブートプロセスはキーボードから制御できるため、力を発生させるアプリケーションには非常に実用的です。
  • ブラウザ互換性のパフォーマンスは一貫しています: ほぼすべてのブラウザをサポートします (有名な IE を含む)

1.4 インストールの依存関係

npmインストール

npm i driver.js --save

糸の取り付け

yarn add driver.js

プロジェクトコンポーネントに依存関係を導入する

import Driver from 'driver.js';import 'driver.js/dist/driver.min.css';

1.5 コードの実装

プロジェクトでは、最初にドライバー オブジェクトをインスタンス化し、次に driver.defineSteps(array) メソッドを呼び出してブート ステップを実装する必要があります。
新しいユーザー ガイダンスを実装する必要があるドライバー オブジェクトを Vue ファイルでインスタンス化します。たとえば、プロジェクトの main.vue ファイルでの driver.js の使用法は次のとおりです。

<template>
  <div class="dashboard-container">
    <component :is="currentRole" />
  </div>
</template>

<script>
import adminDashboard from './admin'
import Driver from 'driver.js' // 引入driver.js依赖
import 'driver.js/dist/driver.min.css' // 引入driver.js的样式文件

export default {
  name: 'Main',
  components: { adminDashboard },
  data() {
    return {
      currentRole: 'adminDashboard',
      driver: null
    }
  },
  mounted() {
    // 实例化driver对象
    this.driver = new Driver()
    // 弹框提示
    this.$confirm('是否进入新手导航？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(() => {
      // 调用新手引导方法
      this.onNavigation()
    }).catch(() => {})
  },
  methods: {
    onNavigation() {
      // 新手引导方法
      this.driver.defineSteps([
        {
          element: '#hamburger-container',
          popover: {
            title: '折叠按钮',
            description: '点击折叠左侧菜单导航',
            position: 'right',
            nextBtnText: '下一步',
            prevBtnText: '上一步',
            closeBtnText: '关闭'
          }
        },
        {
          element: '.panel-group',
          popover: {
            title: '数据统计',
            description: '统计每日最新数据',
            position: 'bottom',
            nextBtnText: '下一步',
            prevBtnText: '上一步',
            closeBtnText: '关闭'
          }
        },
        {
          element: '#home-line-chart',
          popover: {
            title: '数据统计',
            description: '统计每日最新数据',
            position: 'bottom',
            nextBtnText: '下一步',
            prevBtnText: '上一步',
            closeBtnText: '关闭'
          }
        },
        {
          element: '#transaction-table',
          popover: {
            title: '订单汇总',
            description: '汇总平台销售订单量',
            position: 'right',
            nextBtnText: '下一步',
            prevBtnText: '上一步',
            closeBtnText: '关闭',
            doneBtnText: '完成'
          }
        }
      ])

      // 必须调用 start() 方法才能生效
      this.driver.start()
    }
  }
}
</script>

1.6 関連パラメータの設定

defineSteps() メソッドのパラメータは配列型であり、配列内の要素は実行されるブートストラップ ステップです。ステップオプションには以下が含まれます

{
  element: '#item',  // 需要被高亮的元素选择器
  popover: {                    // 弹框内容，如果为空将不会显示弹窗
    className: 'popover-class', // 额外指定的当前步骤弹窗类名
    title: '弹框标题',             // 弹窗的标题
    description: '该步骤是用于xxx', // 弹窗的主体内容
    showButtons: false,         // 是否在弹窗底部显示控制按钮
    closeBtnText: '关闭',      // 关闭按钮的文本
    nextBtnText: '下一步',        // 当前步骤的下一步按钮文本
    prevBtnText: '上一步',    // 当前步骤的上一步按钮文本
    doneBtnText: '完成'    // 最后一步完成按钮文本
  }
}

Diver オブジェクト設定パラメータの説明

const driver = new Driver({
    className: 'scoped-class', //包裹driver.js弹窗的类名
    animate: true,  // 高亮元素改变时是否显示动画
    opacity: 0.75,  //背景透明度(0 表示只有弹窗并且没有遮罩)
    padding: 10,   // 元素与边缘的距离
    allowClose: true, // 是否允许点击遮罩时关闭
    overlayClickNext: false, //是否允许点击遮罩时移到到下一步
    doneBtnText: 'Done', // 最终按钮上的文本
    closeBtnText: 'Close', // 当前步骤关闭按钮上的文本
    nextBtnText: 'Next', //当前步骤下一步按钮上的文本
    prevBtnText: 'Previous', // 当前步骤上一步按钮上的文本
    showButtons: false, //是否在底部显示控制按钮
    keyboardControl: true, // 是否允许通告键盘控制(escape关闭，箭头键用于移动)
    scrollIntoViewOptions: {}, // `scrollIntoView()` 方法的选项
    onHighlightStarted: (Element) {}, // 元素开将要高亮时调用
    onHighlighted: (Element) {}, // 元素开完全高亮时调用
    onDeselected: (Element) {}, // 取消选择时调用
    onReset: (Element) {},        // 遮罩将要关闭时调用
    onNext: (Element) => {},      // 任何步骤中移到到下一步时调用
    onPrevious: (Element) => {},  // 任何步骤中移到到上一步时调用
});

ドライバー オブジェクトは、開発者が driver.js を高度にカスタマイズできる一連の強力な API メソッドを提供します。ドライバー オブジェクト API メソッドは次のとおりです。

const isActivated = driver.isActivated; // 检查driver是否激活
driver.moveNext();     // 移动到步骤列表中的下一步
driver.movePrevious(); // 移动到步骤列表中的上一步
driver.start(stepNumber = 0);  // 从指定的步骤开始
driver.highlight(string|stepDefinition); // 高亮通过查询选择器指定的或步骤定义的元素
driver.reset(); // 重置遮罩并且清屏
driver.hasHighlightedElement(); //检查是否有高亮元素
driver.hasNextStep(); // 检查是否有可移动到的下一步元素
driver.hasPreviousStep(); // 检查是否有可移动到的上一步元素
driver.preventMove();// 阻止当前移动。如果要执行某些异步任务并手动移动到下一步，则在“onNext”或“onPrevious”中很有用

const activeElement = driver.getHighlightedElement();// 获取屏幕上当前高亮元素
const lastActiveElement = driver.getLastHighlightedElement();
activeElement.getCalculatedPosition(); // 获取活动元素的屏幕坐标
activeElement.hidePopover();  // 隐藏弹窗
activeElement.showPopover();  // 显示弹窗
activeElement.getNode();  // 获取此元素后面的DOM元素