页面引导解决方案分享

前言

本文主要介绍的是我们在项目中有时候会遇到需要一步一步引导用户操作的使用场景，类似于新手教学的操作指引，给出的解决方案是Intro.js 库，通过此库创建引导式用户体验。

介绍

Intro.js 是一个轻量级的 JavaScript 库，用于创建网站或应用程序的导览（tutorial）和引导（onboarding）体验。它的主要作用包括：

用户引导：帮助新用户快速熟悉界面和功能，通过步步引导他们了解关键元素。
增强用户体验：通过可视化的提示和步骤，提高用户的学习效率，减少使用过程中的困惑。
定制化：提供灵活的配置选项，允许开发者自定义每个步骤的内容、样式及行为。
支持异步操作：允许在每一步之间执行异步操作，比如加载数据或发送请求，以确保信息的及时性和准确性。
易于集成：可以方便地与现有的网站或应用集成，支持多种框架和平台。

安装

通过CDN引入

html 复制代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css">
<script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js"></script>

npm
js 复制代码
```
npm install intro.js --save
```
yarn
js 复制代码
```
yarn add intro.js
```

基本用法

初始化引导

在你的 JavaScript 文件中，首先需要初始化 Intro.js：

javascript 复制代码

// 创建一个新的 Intro.js 实例
const intro = introJs();

// 配置引导步骤
intro.setOptions({
  steps: [
    {
      intro: '欢迎使用我们的应用！'
    },
    {
      element: '#step1',
      intro: '这是第一个重要的功能。',
      position: 'right'
    },
    {
      element: '#step2',
      intro: '这里是第二个功能。',
      position: 'bottom'
    }
  ]
});

// 启动引导
intro.start();

自定义选项

通过 setOptions 方法自定义引导的行为和样式，例如：

跳过按钮：允许用户跳过引导。
使用键盘导航：启用键盘操作以进行引导。
主题：选择不同的主题样式。

javascript 复制代码

intro.setOptions({
  skipLabel: '跳过',
  nextLabel: '下一步',
  prevLabel: '上一步',
  doneLabel: '完成',
  hidePrev: true,
  hideNext: false
});

示例

以下是一个完整的示例，展示如何在一个简单的 HTML 页面中实现 Intro.js：

javascript 复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Intro.js 示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css">
    <script src="https://cdn.jsdelivr.net/npm/intro.js/minified/intro.min.js"></script>
    <style>
        #step1, #step2 {
            margin: 20px;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

<div id="step1">功能 1</div>
<div id="step2">功能 2</div>
<button id="startButton">开始引导</button>

<script>
    document.getElementById('startButton').addEventListener('click', function() {
        const intro = introJs();
        intro.setOptions({
            steps: [
                {
                    intro: '欢迎使用我们的应用！'
                },
                {
                    element: '#step1',
                    intro: '这是第一个重要的功能。',
                    position: 'right'
                },
                {
                    element: '#step2',
                    intro: '这里是第二个功能。',
                    position: 'bottom'
                }
            ]
        });
        intro.start();
    });
</script>

</body>
</html>

在Vue文件中使用

效果图：

代码

vue 复制代码

<template>
	<div class="second">
		<div id="step1">功能 1</div>
		<div id="step2">功能 2</div>
		<el-button id="startButton" @click="startGuide">开始引导</el-button>
	</div>
</template>

<script lang="ts">
import {
	computed,
	ref,
	reactive,
	onMounted,
	onBeforeUnmount,
	watch,
	toRefs,
	nextTick,
} from "vue";
import intro from "intro.js";
import "intro.js/minified/introjs.min.css";

export default {
	name: "second",
	props: {},
	components: {},
	setup(props, context) {
		const startGuide = () => {
			const introInstance = intro();
			introInstance.setOptions({
				steps: [
					{
						intro: "欢迎使用我们的应用！",
					},
					{
						element: "#step1" as string | HTMLElement,
						title: "功能1",
						intro: "这是第一个重要的功能。",
						position: "right",
					},
					{
						element: "#step2" as string | HTMLElement,
						title: "功能2",
						intro: "这里是第二个功能。",
						position: "bottom",
					},
				],
			});
			introInstance.start();
		};

		onMounted(() => {});
		return {
			startGuide,
		};
	},
};
</script>

<style lang="scss" scoped>
.second {
	height: 100%;
	width: 100%;
	padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	#step1,
	#step2 {
		border: 1px solid #ccc;
		margin-bottom: 20px;
        width: 400px;
        height: 40px;
        line-height: 40px;
        text-align: center;
	}
}
</style>

$!CAUTION$
提示框的位置也就是position字段的值是自适应的，取决于目标元素的位置。例如：当目标元素在顶部时，设置position为top是无效的

页面引导解决方案分享

前言

介绍

安装

基本用法

初始化引导

自定义选项

示例

样例参考

API

配置项

HTML Attributes