页面引导解决方案分享

news2024/11/18 16:48:16

前言

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

介绍

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

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

安装

通过CDN引入

<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
```
npm install intro.js --save
```
yarn
```
yarn add intro.js
```

基本用法

初始化引导

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

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

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

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

自定义选项

通过 setOptions 方法自定义引导的行为和样式，例如：
- 跳过按钮：允许用户跳过引导。
- 使用键盘导航：启用键盘操作以进行引导。
- 主题：选择不同的主题样式。
```
intro.setOptions({
  skipLabel: '跳过',
  nextLabel: '下一步',
  prevLabel: '上一步',
  doneLabel: '完成',
  hidePrev: true,
  hideNext: false
});
```

示例

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

<!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文件中使用

效果图：

代码

<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>