vue 프로젝트에서 사용자 안내 기능을 어떻게 구현하나요? 다음 글에서는 Intro.js를 사용하여 vue 프로젝트에서 사용자 안내 기능을 구현하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!
시스템이 새 버전을 출시하거나 새 기능을 출시한 후 사용자가 새 기능을 빠르게 이해할 수 있도록 일반적으로 일부 사용자 안내 인터페이스를 추가해야 합니다.
사용자 지침을 구현하는 데 사용되는 일반적인 플러그인에는 Intro.js, Shepherd, vue-tour, Driver.js 등이 있습니다. 각 플러그인에는 고유한 장단점이 있습니다. 이 글에서는 Intro.js를 사용하여 vue 프로젝트를 기반으로 사용자 지침을 구현하는 방법을 소개합니다. [학습 동영상 공유: 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（隐式指引）两种用户指引形式（注：这两种译法是笔者自己取的，仅用于区分！！！）。
其中，显示指引更倾向于是对功能的简要介绍，其效果如下图所示，通常是由遮罩层、选中的页面元素、指引信息弹窗等共同组成。
隐式指引，则像是一种操作式的引导，鼓励用户参与其中，边学边用，其默认效果如下图所示，提示用户点击指定元素，随后会显示相应的提示信息或进入下一步操作等。
这两种形式的用法核心在于选择元素并预设指引信息。因此，本文将主要介绍tour的用法，hint的使用方法可以触类旁通，参考tour的用法及 官方文档中的demo 后可以轻松上手，便不在此赘述。
Tour API
Intro.js官方提供了很多Tour API，这里仅针对最常用的基础API做介绍，完整的API介绍可查看官方API文档。
introJs([targetElm])
用于创建一个 introJs 的对象，可选参数 targetElm, 웹 프론트엔드 비디오
】
Intro.js란 무엇입니까
Intro.js는 단계별 소개 또는 프롬프트를 추가하기 위한 오픈 소스 Javascript/CSS 라이브러리입니다. 다음과 같은 장점이 있습니다:
- 종속성 없음: 다른 종속성이 필요하지 않습니다.
- 작고 빠름: 파일 크기가 작고 부팅 프로세스가 원활합니다. 그 중 자바스크립트 파일의 전체 크기는 10KB, CSS 파일의 전체 크기는 2.5KB이다.
- 사용자 친화적: 개인 취향에 따라 선택할 수 있는 다양한 테마가 제공됩니다.
- 브라우저 호환성: Chrome, Firefox, Opera, Safari 및 IE 브라우저를 포함한 모든 주요 브라우저와 호환됩니다.
- 완전한 문서: 문서에는 소개할 각 요소의 내용과 예가 포함되어 있습니다.
API & options🎜
🎜Intro.js는 둘러보기(명시적 안내)와 힌트(암시적 안내)를 모두 구현할 수 있습니다. 사용자 가이드 양식 (참고: 이 두 번역은 저자가 직접 가져온 것이며 구별을 위해서만 사용됩니다!!!). 🎜🎜 그 중 표시 가이드는 기능에 대한 간략한 소개일 가능성이 높습니다. 그 효과는 일반적으로 마스크 레이어, 선택 페이지 요소, 안내 정보 팝업 창으로 구성됩니다. 등. 🎜🎜
🎜🎜숨김 가이드는 사용자가 사용하면서 참여하고 학습하도록 권장하는 운영 가이드와 같습니다. 기본 효과는 아래 그림과 같이 사용자가 지정된 요소를 클릭하라는 메시지를 표시하고 해당 프롬프트 정보가 표시되거나 다음이 표시됩니다. 단계가 수행됩니다. 🎜🎜
🎜🎜🎜🎜이 두 가지 형태는 그 사용법의 핵심은 요소를 선택하고 안내 정보를 미리 설정하는 것입니다. 따라서 이번 글에서는 주로 Tour의 사용법을 소개하겠습니다. %2Fbasic%2Fhints" target=" _blank" rel="nofollow noopener noreferrer" title="https://introjs.com/docs/examples/basic/hints" ref="nofollow noopener noreferrer">다음 이후에 쉽게 시작할 수 있습니다. 데모🎜는 공식 문서에 있으므로 여기서는 반복하지 않겠습니다. 🎜
🎜Tour API🎜
🎜Intro.js는 공식적으로 많은 Tour API를 제공합니다. 여기서는 가장 일반적으로 사용되는 기본 API만 소개합니다. 조회됨공식 API 문서 🎜. 🎜
🎜introJs([targetElm])🎜🎜🎜은 introJs의 객체, 선택적 매개변수 targetElm를 생성하는 데 사용됩니다. 소개를 시작하는 특정 요소를 참조하는 문자열 유형입니다(예: "#intro-farm"). 🎜🎜🎜introJs.start()🎜🎜🎜정의된 요소 소개를 시작하면 사용자 안내가 시작됩니다. 🎜introJs.setOptions(options)
생성된 introJs 객체에 대한 옵션 세트를 설정합니다. 매개변수 옵션은 버튼 표시 텍스트, 마스크 레이어 투명도, 프롬프트 텍스트 등 가이드의 모든 정보를 포함하는 개체 유형입니다. introJs 对象设置一组选项。参数 options 是一个对象类型，包括了指引中的所有信息，如：按钮显示文字、遮罩层透明度、提示文本等。
Tour options
常用option如下：
- nextLabel：下一个的按钮文字
- prevLabel：上一个按钮文字
- skipLabel：跳过指引的按钮文字
- doneLabel：完成按钮的文字
- hidePrev：是否在第一步中隐藏“上一步”按钮;不隐藏，将呈现为一个禁用的按钮
- hideNext：是否在最后一步中隐藏“下一步”按钮（同时会隐藏完成按钮);不隐藏，将呈现为一个禁用的按钮
- exitOnEsc：点击键盘的ESC按钮是否退出指引
- exitOnOverlayClick：点击遮罩层时是否退出介绍
- showStepNumbers：是否显示步骤编号
- disableInteraction：是否禁用高亮显示框内元素的交互
- showBullets：是否显示面板的指示点
- overlayOpacity：遮罩层的透明度 0-1之间
- helperElementPadding：选中的指引元素周围的填充距离
- steps：引导框内的相关参数配置，具体配置见下文
上述部分字段对应的内容如下图所示，更多完整options可查看 官方文档。
其中，doneLable 只会在最后一步指引中出现，会占据 nextLabel 的位置，因此，如果 hideNext 置为true时，最后一步中 nextLabel 和 doneLabel 均会被隐藏。
helperElementPadding 是图中高亮区域中白色边框部分（为区分该字段对应区域，这里特意给所选元素一个粉色的背景色）。
安装
Intro.js没有任何依赖项，只需要安装intro.js即可。
npm install intro.js --save
로그인 후 복사
yarn add intro.js
로그인 후 복사
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”。
2、引入配置文件
在需要添加用户指引的文件中引入introConfig.js文件:
import intro from "@/utils/introConfig.js";
로그인 후 복사
3、配置指引步骤并启动
在具体的使用文件中，通过 setOptions 的 steps属性配置指引步骤，它是数组类型，每一项都对应一个指引步骤，其中的字段含义如下：
element：定位到相应的元素位置，如果不设置，则默认展示在屏幕中央
title
투어 옵션🎜
🎜일반적으로 사용되는 옵션은 다음과 같습니다. 🎜
- nextLabel: 다음 버튼 텍스트
- prevLabel: 이전 A 버튼 텍스트
- skipLabel: 가이드 건너뛰기 버튼 텍스트
- doneLabel: 완료 버튼 텍스트
- hidePrev: "이전" 숨기기 여부 step" 첫 번째 단계의 " 버튼; 숨겨지지 않으면 비활성화된 버튼으로 렌더링됩니다.
- hideNext: 마지막 단계에서 "다음" 버튼을 숨길지 여부(완료 버튼도 숨겨집니다) ), 숨겨지지 않으면 비활성화된 버튼으로 렌더링됩니다. Button
- exitOnEsc: 키보드의 ESC 버튼을 클릭할 때 가이드를 종료할지 여부
- exitOnOverlayClick: 가이드를 종료할지 여부 마스크 레이어를 클릭할 때 가이드
- showStepNumbers: 단계 번호를 표시할지 여부
- li>
- disableInteraction: 강조 표시된 상자에서 요소의 상호 작용을 비활성화할지 여부
- showBullets: 패널의 표시 지점 표시 여부
- overlayOpacity: 0-1 사이의 마스크 레이어 투명도
- HelperElementPadding: 선택한 가이드 요소 주위의 패딩 거리
- 단계: 가이드 상자의 관련 매개변수 구성, 구체적인 구성은 아래 참조
🎜위 부분 필드의 해당 내용은 아래 그림에 표시됩니다. 옵션을 보려면
공식 문서. 🎜🎜
🎜🎜어디 , 🎜doneLable🎜은 안내의 마지막 단계에서만 나타나며 🎜nextLabel🎜의 위치를 차지하게 됩니다. 따라서 🎜hideNext🎜를 true로 설정하면 🎜nextLabel🎜과 🎜doneLabel🎜이 모두 마지막 단계에서 숨겨집니다. 🎜🎜🎜helperElementPadding🎜은 사진에서 강조 표시된 영역의 흰색 테두리 부분입니다(필드의 해당 영역을 구분하기 위해 선택한 요소에는 분홍색 배경색이 특별히 지정됩니다). 🎜
🎜Installation🎜
🎜Intro.js에는 종속성이 없으므로 intro.js만 설치하면 됩니다. 🎜
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();
})
}로그인 후 복사
로그인 후 복사
rrreee
rrreee
🎜Use🎜
🎜방법 1🎜
🎜사용 설명서 내용이 비교적 간단한 경우 고정된 경우 html 태그에 직접 속성을 작성하고 introJs().start()를 호출할 수 있습니다. 주요 속성은 다음과 같습니다: 🎜
- data-title: 제목 텍스트
- data-intro: 프롬프트 정보 내용
- data-step: 단계 번호(우선순위) < /li>
- data-tooltipClass: 팁에 대한 CSS 클래스 정의
- data-highlightClass: CSS 클래스를 helperLayer에 연결
- data-position: 팁의 위치 팁, 기본값은 하단입니다.
- data-scrollTo: 스크롤할 요소, 요소 또는 도구 설명입니다. 기본값은 요소입니다.
- data-disable-interaction: 강조 표시된 상자의 요소와의 상호 작용을 비활성화할지 여부
rrreee
방법 2 rrreee h2>🎜페이지에 많은 단계를 구성해야 하거나 특별한 구성이 있는 경우 두 번째 방법을 사용할 수 있습니다. 구성은 JSON에서 즉, API -- introJs.setOptions(options)를 사용하여 사용자 정의해야 합니다. 🎜🎜1. introConfig.js를 캡슐화하세요🎜🎜실제 사용 중에 사용자 지침이 필요한 여러 시나리오가 있을 수 있습니다. 일부 기본 옵션을 여러 번 구성하는 것을 피하기 위해 기본 항목을 공개 파일 introConfig.js로 캡슐화할 수 있습니다. 파일 내용은 다음과 같습니다. 🎜rrreee🎜또한 Intro.js 공식적으로는 Classic, Royal, Nassim, Nazanin, Dark, Modern 총 6가지 테마를 제공합니다. 각 테마의 표시 효과는 공식 웹사이트. 기본값은 Classic입니다. 다른 테마를 사용하려면 아래와 같이 "intro.js/themes" 파일 아래에 해당 CSS 파일을 도입해야 합니다. 여기서는 "introjs-modern.css"를 사용합니다. 🎜🎜🎜🎜 2. 구성 파일을 추가합니다. 🎜🎜사용자 안내를 추가해야 하는 파일에 introConfig.js 파일을 추가합니다. 🎜rrreee🎜3 안내 단계를 구성하고 🎜🎜특정 사용 파일에서 시작합니다. , setOptions 전달 steps 속성은 안내 단계를 구성합니다. 각 항목은 안내 단계에 해당합니다. 🎜🎜요소</code >: 해당 요소 위치 찾기, 설정하지 않을 경우 기본적으로 화면 중앙에 표시됩니다🎜🎜<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来自定义样式
（学习视频分享：web前端开发、编程基础视频）
위 내용은 Intro.js를 사용하여 vue 프로젝트에서 사용자 안내 기능을 구현하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
