Intro.js を使用して vue プロジェクトにユーザー ガイダンス機能を実装する方法の簡単な分析

vueプロジェクトにユーザーガイダンス機能を実装するにはどうすればよいですか?次の記事では、Intro.js を使用して vue プロジェクトにユーザー ガイダンス機能を実装する方法を紹介します。

システムが新しいバージョンをリリースしたり、新しい機能を開始した後、ユーザーが新しい機能をすぐに理解できるようにするために、通常、いくつかのユーザー ガイダンス インターフェイスを追加する必要があります。

ユーザー ガイダンスの実装に使用される一般的なプラグインは、Intro.js、Shepherd、vue-tour、Driver です。 jsなど。これらのプラグインにはそれぞれ長所と短所がありますが、この記事では Intro.js を使用して vue プロジェクトに基づいたユーザー ガイダンスを実装する方法を紹介します。 [学習ビデオ共有: vue ビデオ チュートリアル 、Web フロントエンド ビデオ ]

Intro.js とは

Intro.js は、ステップごとの紹介やプロンプトを追加するためのオープン ソースの Javascript/CSS ライブラリです。これには次のような利点があります。

• 依存関係がない: 他の依存関係は必要ありません。
• 小さくて速い: ファイル サイズが小さく、起動プロセスがスムーズです。このうち、JavaScript ファイル全体のサイズは 10KB、CSS ファイルは 2.5KB です。
• ユーザーフレンドリー: 複数のテーマが提供されており、個人の好みに応じて選択できます。
• ブラウザの互換性: Chrome、Firefox、Opera、Safari、IE ブラウザなど、すべての主流ブラウザと互換性があります。
• 完全なドキュメント: ドキュメントには、紹介する各要素の内容と例が含まれています。

API とオプション

Intro.js では、ツアー (明示的なガイダンス) とヒント (暗黙的なガイダンス) という 2 つのユーザー ガイダンス フォームを実装できます (注: これら 2 つは、翻訳は著者自身が選択したものであり、区別するためにのみ使用されます!!!)。

このうち、表示ガイドは機能の簡単な紹介である可能性が高く、その効果は下図に示すとおりで、通常はマスクレイヤー、選択されたページ要素、ガイダンス情報ポップで構成されます。 -アップウィンドウなど。

暗黙的なガイダンスは一種の操作ガイダンスのようなもので、ユーザーの参加と使用中の学習を促します。デフォルトの効果は次の図に示すように、ユーザーにクリックを促します。要素を指定すると、対応するプロンプト情報が表示されるか、次のステップに進みます。

これら 2 つのフォームの主な使用法は、要素と事前設定されたガイダンス情報を選択することです。そのため、この記事ではツアーの使い方を中心に紹介します ヒントの使い方は類推して理解できます 公式ドキュメントのツアーの使い方とデモを参考にすると簡単に始められるので割愛しますここで詳細を説明します。

ツアー API

Intro.js は、多くのツアー API を公式に提供しています。ここでは、最も一般的に使用される基本的な API のみを紹介します。完全な API の概要は、こちらをご覧ください

公式 API ドキュメント。

introJs([targetElm])

は、

introJs のオブジェクトを作成するために使用されます。オプションのパラメーター targetElm は、イントロを開始する特定の要素を参照する String タイプ (例: "#intro-farm")。

introJs.start()

定義された要素の導入を開始します。これにより、ユーザー ガイダンスが開始されます。

introJs.setOptions(options)

作成された introJs オブジェクトのオプションのセットを設定します。パラメーター オプションは、ボタン表示テキスト、マスク レイヤーの透明度、プロンプト テキストなど、ガイド内のすべての情報を含むオブジェクト タイプです。

ツアー オプション

一般的に使用されるオプションは次のとおりです:

• nextLabel: 次へボタンのテキスト
• prevLabel: 前へボタンのテキスト
• skipLabel: スキップボタンのテキスト
• doneLabel: 完了ボタンのテキスト
• hidePrev: 最初のステップで「前へ」ボタンを非表示にするかどうか; いいえ、非表示にします。無効なボタンとして表示されます
• hideNext: 最後のステップで「次へ」ボタンを非表示にするかどうか (完了ボタンも非表示になります)。非表示でない場合は、無効なボタンとして表示されます
• exitOnEsc: キーボードの ESC ボタンをクリックしてガイドを終了するかどうか
• exitOnOverlayClick: マスク レイヤーをクリックしたときにガイドを終了するかどうか
• showStepNumbers: ステップを表示するかどうか数値
• disableInteraction: ハイライトされたボックス内の要素の相互作用を無効にするかどうか
• showBullets: パネルのインジケーター ポイントを表示するかどうか
• overlayOpacity: マスク レイヤの透明度0 ～ 1 の間
#helperElementPadding: 選択済み ガイダンス要素周囲のパディング距離
• #steps: ガイダンス ボックス内の関連パラメーター構成。具体的な構成については以下を参照してください。

上記のフィールドの一部に対応する内容を下の図に示します。より完全なオプションは、

公式ドキュメントを参照できます。

このうち、

doneLable はガイダンスの最後のステップにのみ表示され、nextLabel の位置を占めます。 if hideNext が true に設定されている場合、nextLabel と doneLabel の両方が最後のステップで非表示になります。

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

使用方法

#方法 1

ユーザー ガイドの内容が比較的単純で固定されている場合は、HTML タグに属性を直接記述して、 introJs ().start() を呼び出します。主な属性は次のとおりです。

data-title: タイトルのテキスト
• data-intro: プロンプト情報の内容
• data-step: ステップ番号 (優先度)
• data-tooltipClass: ヒントの CSS クラスを定義します。
• data-highlightClass: CSS クラスを helperLayer にアタッチします。
• ##data-position: ヒントの位置、デフォルトはbottom
• data-scrollTo: スクロール先の要素、要素またはツールチップ。デフォルト値は要素です。
• 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>

方法 2

ページで追加の手順を構成する必要がある場合、または特別な構成がある場合は、2 番目の方法を使用できます。構成は JSON で、つまり API introJs.setOptions(options) を使用してカスタマイズする必要があります。

1. カプセル化

introConfig.js

実際の使用中には、ユーザーのガイダンスが必要なシナリオが複数ある場合があります。いくつかの基本的なオプションを複数回構成することを避けるために、基本的な項目をパブリック ファイル

introConfig.js

にカプセル化できます。ファイルの内容は次のとおりです: <pre class='brush:php;toolbar:false;'>// src/utils/introConfig.js import introJs from &quot;intro.js&quot;; import &quot;intro.js/introjs.css&quot;; // intro.js的基础样式文件 import &quot;intro.js/themes/introjs-modern.css&quot;; // 主题样式文件 const intro = introJs(); intro.setOptions({ nextLabel: &quot;下一步&quot;, // 下一个的按钮文字 prevLabel: &quot;上一步&quot;, // 上一个按钮文字 skipLabel: &quot;跳过&quot;, // 跳过指引的按钮文字 doneLabel: &quot;完成&quot;, // 完成按钮的文字 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;</pre> さらに、 Intro.js 公式 クラシック、ロイヤル、ナシム、ナザニン、ダーク、モダンの計 6 種類のテーマが用意されており、各テーマの表示効果は

公式サイト

で確認できます。デフォルトはクラシックですが、他のテーマを使用したい場合は、以下に示すように、対応する css ファイルを「intro.js/themes」ファイルの下に導入する必要があります。ここでは「introjs-modern.css」を使用します。

2. 構成ファイルを導入します

ユーザー ガイダンスを追加する必要があるファイルに

introConfig.js

ファイルを導入します。 <pre class='brush:php;toolbar:false;'>import intro from &quot;@/utils/introConfig.js&quot;;</pre> 3. ガイダンス ステップを構成して開始します

特定の使用法ファイルで、setOptions の

steps

属性を使用してガイダンス ステップを構成します。これは配列型です。ステップ、フィールドの意味は次のとおりです:

element

: 対応する要素の位置を特定します。設定されていない場合は中央に表示されます。デフォルトの画面の

title

: ガイダンス ポップアップ ウィンドウのタイトル <p><code>intro：指引弹窗的文本内容，可插入html内容

示例如下：

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

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

4、Demo效果

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

注意事项

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

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

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

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

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

（学习视频分享：web前端开发、编程基础视频）

以上がIntro.js を使用して vue プロジェクトにユーザー ガイダンス機能を実装する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。