Vue + intro.js 实现页面新手引导流程功能
0
0
0
Intro.js 是一个开源的纯 Javascript / CSS 库，用于添加分步介绍或提示。
本文介绍 Vue 3 项目中 Intro.js 的使用方法，通过 Intro.js 实现页面分步引导和功能提示。内容涵盖 Intro.js 的安装、样式引入、Tour 引导流程以及 Hint 提示功能，帮助开发者快速为 Web 应用添加轻量、直观的新手引导体验。
1
介绍
https://introjs.com/docs 这个是官网
Intro.js 是一个开源的纯 Javascript / CSS 库，用于添加分步介绍或提示。
Intro.js API 的简洁性可帮助您为产品开发高级引导流程。Intro.js 体积小巧，仅有 10kB，且没有任何外部依赖！
2
安装 intro.js
如图所示 输入命令 pnpm install intro.js --save 进行安装
3
引入样式
在项目的 main.js 中，引入 intro.js 库和相关样式文件，如下：
// 首页引导插件
// introjs库
import intro from 'intro.js'
// introjs默认css样式
import 'intro.js/introjs.css'
// introjs主题
import 'intro.js/themes/introjs-modern.css'
// 把intro.js加入到vue的prototype中，方便使用，就可以直接通过this.$intro()来调用了
Vue.prototype.$intro = intro
4
引导案例
效果如图 他是通过 id进行绑定 来处理引导区域的
<script setup lang="ts">
import introJs from 'intro.js'
const startGuide = () => {
const intro = introJs()
intro.setOptions({
steps: [
{
element: '#step-1',
intro: '这里是第一个功能'
},
{
element: '#step-2',
intro: '这里是第二个功能'
},
{
element: '#step-3',
intro: '这里是第三个功能'
}
]
})
intro.start()
}
</script>
<template>
<div>
<button @click="startGuide">
开始引导
</button>
<div id="step-1">
第一步
</div>
<div id="step-2">
第二步
</div>
<div id="step-3">
第三步
</div>
</div>
</template>
5
使用 data-intro 和 data-step
还有另外一种方式 这种方式无需进行数据的配置 可以直接写在元素上
<script setup lang="ts">
import introJs from 'intro.js'
const startGuide = () => {
introJs().start()
}
</script>
<template>
<div>
<button @click="startGuide">
开始引导
</button>
<div class="card-demo">
<div class="card shadow--md">
<div class="card__image">
<img
src="https://images.unsplash.com/photo-1506624183912-c602f4a21ca7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="灯塔图片"
title="灯塔图片标题"
/>
</div>
<div class="card__body">
<h4
data-intro="你好！👋 这里是灯塔名称"
data-step="1"
>
Quaco 灯塔
</h4>
<small
data-intro="你可以选中这段文字"
data-step="2"
>
Quaco Head 灯塔是一座维护良好的灯塔，位于圣马丁斯附近。
沿着海边步行一小段路，就能欣赏到这座美丽的灯塔。
</small>
</div>
</div>
</div>
</div>
</template>
6
data-hint
12
您还可以使用 HTML 属性向页面添加提示data-hint。只需将这些属性添加到元素并调用introJs.hint().render()
代码如下
<script setup lang="ts">
import introJs from 'intro.js'
const startHint = () => {
introJs.hint().render()
}
</script>
<template>
<div>
<button @click="startHint">
显示提示
</button>
<div class="card-demo">
<div class="card shadow--md">
<div class="card__image">
<img
src="https://images.unsplash.com/photo-1506624183912-c602f4a21ca7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="灯塔图片"
title="灯塔图片标题"
/>
</div>
<div class="card__body">
<h4
data-hint="你好！👋 点击这个链接"
data-hint-position="bottom-middle"
>
Quaco 灯塔
</h4>
<small
data-hint="你可以选中这段文字"
data-hint-position="top-right"
>
Quaco Head 灯塔是一座维护良好的灯塔，位于圣马丁斯附近。
沿着海边步行一小段路，就能欣赏到这座美丽的灯塔。
</small>
</div>
</div>
</div>
</div>
</template>
0
0
0
qq空间 
微博 
复制链接 
分享 
本文未经作者允许授权，禁止转载 更多相关项目
猜你喜欢
评论/提问(已发布 0 条)
评论 
收藏 
分享 
下载 
举报 
回顶部