vueプロジェクトにユーザーガイダンス機能を実装するにはどうすればよいですか?次の記事では、Intro.js を使用して vue プロジェクトにユーザー ガイダンス機能を実装する方法を紹介します。
システムが新しいバージョンをリリースしたり、新しい機能を開始した後、ユーザーが新しい機能をすぐに理解できるようにするために、通常、いくつかのユーザー ガイダンス インターフェイスを追加する必要があります。
ユーザー ガイダンスの実装に使用される一般的なプラグインは、Intro.js、Shepherd、vue-tour、Driver です。 jsなど。これらのプラグインにはそれぞれ長所と短所がありますが、この記事では Intro.js を使用して vue プロジェクトに基づいたユーザー ガイダンスを実装する方法を紹介します。 [学習ビデオ共有: vue ビデオ チュートリアル 、Web フロントエンド ビデオ ]
Intro.js は、ステップごとの紹介やプロンプトを追加するためのオープン ソースの Javascript/CSS ライブラリです。これには次のような利点があります。
Intro.js では、ツアー (明示的なガイダンス) とヒント (暗黙的なガイダンス) という 2 つのユーザー ガイダンス フォームを実装できます (注: これら 2 つは、翻訳は著者自身が選択したものであり、区別するためにのみ使用されます!!!)。
このうち、表示ガイドは機能の簡単な紹介である可能性が高く、その効果は下図に示すとおりで、通常はマスクレイヤー、選択されたページ要素、ガイダンス情報ポップで構成されます。 -アップウィンドウなど。
暗黙的なガイダンスは一種の操作ガイダンスのようなもので、ユーザーの参加と使用中の学習を促します。デフォルトの効果は次の図に示すように、ユーザーにクリックを促します。要素を指定すると、対応するプロンプト情報が表示されるか、次のステップに進みます。
これら 2 つのフォームの主な使用法は、要素と事前設定されたガイダンス情報を選択することです。そのため、この記事ではツアーの使い方を中心に紹介します ヒントの使い方は類推して理解できます 公式ドキュメントのツアーの使い方とデモを参考にすると簡単に始められるので割愛しますここで詳細を説明します。
公式 API ドキュメント。
introJs のオブジェクトを作成するために使用されます。オプションのパラメーター targetElm は、イントロを開始する特定の要素を参照する String タイプ (例: "#intro-farm")。
作成された introJs オブジェクトのオプションのセットを設定します。パラメーター オプションは、ボタン表示テキスト、マスク レイヤーの透明度、プロンプト テキストなど、ガイド内のすべての情報を含むオブジェクト タイプです。
一般的に使用されるオプションは次のとおりです:
公式ドキュメントを参照できます。
doneLable はガイダンスの最後のステップにのみ表示され、nextLabel の位置を占めます。 if hideNext が true に設定されている場合、nextLabel と doneLabel の両方が最後のステップで非表示になります。
helperElementPadding は、画像内のハイライト領域の白い境界線の部分です (フィールドの対応する領域を区別するために、特別にピンク色の背景色が与えられています)選択された要素)。
npm install intro.js --save
yarn add intro.js
git clone https://github.com/usablica/intro.js.git
<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>1. カプセル化
introConfig.js実際の使用中には、ユーザーのガイダンスが必要なシナリオが複数ある場合があります。いくつかの基本的なオプションを複数回構成することを避けるために、基本的な項目をパブリック ファイル
にカプセル化できます。ファイルの内容は次のとおりです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 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;</pre><div class="contentsignin">ログイン後にコピー</div></div> さらに、 Intro.js 公式 クラシック、ロイヤル、ナシム、ナザニン、ダーク、モダンの計 6 種類のテーマが用意されており、各テーマの表示効果は
で確認できます。デフォルトはクラシックですが、他のテーマを使用したい場合は、以下に示すように、対応する css ファイルを「intro.js/themes」ファイルの下に導入する必要があります。ここでは「introjs-modern.css」を使用します。
2. 構成ファイルを導入します
ユーザー ガイダンスを追加する必要があるファイルに
introConfig.js ファイルを導入します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import intro from "@/utils/introConfig.js";</pre><div class="contentsignin">ログイン後にコピー</div></div> 3. ガイダンス ステップを構成して開始します
特定の使用法ファイルで、setOptions の
steps 属性を使用してガイダンス ステップを構成します。これは配列型です。ステップ、フィールドの意味は次のとおりです:
: 対応する要素の位置を特定します。設定されていない場合は中央に表示されます。デフォルトの画面の
: ガイダンス ポップアップ ウィンドウのタイトル <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 src="interesting.GIF" alt="" style="max-width:90%" class="specialImg"/>`
},
]
});
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来自定义样式
以上がIntro.js を使用して vue プロジェクトにユーザー ガイダンス機能を実装する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
