| Vue3网站用户引导功能【Intro.js】 | 您所在的位置：网站首页 › 引导页功能介绍 › Vue3网站用户引导功能【Intro.js】 |
Vue3网站用户引导功能【Intro.js】
|
一、介绍
Intro.js 是一个用于创建网站用户引导、功能介绍和教程的 JavaScript 库。它允许开发者通过步骤和提示突出显示网站上的特定元素，以帮助用户更好地了解和使用网站的功能。以下是 Intro.js 的一些关键特点和用法介绍： 更多Intro.js 功能网址：Intro.js Themes | Intro.js Docs
或 yarn add intro.js // 使用yarn安装 （2）引入Intro.js import IntroJs from 'intro.js' // introjs库 import 'intro.js/introjs.css' // introjs默认css样式 // import 'intro.js/themes/introjs-modern.css' // introjs主题 （3）实现整体Vue引导 引导111111 引导2222222 引导333333 import IntroJs from 'intro.js' // introjs库 import 'intro.js/introjs.css' // introjs默认css样式 // import 'intro.js/themes/introjs-modern.css' // introjs主题 // introjs还提供了多种主题，可以通过以下方式引入 import 'intro.js/themes/introjs-dark.css' // introjs主题 import { nextTick, onMounted } from "vue"; export default { setup() { const initPageIntro = () => { // 引导图 const allSteps = [ { element: '#one', //这是添加引导的元素id intro: '引导一1111111111111111', //这是引导提示内容 position: 'right' //这是引导位置 }, { element: '#two', intro: '引导二1111111111111111', position: 'left' }, { element: '#finally', intro: '引导结束', position: 'top' } ] const curIntro = IntroJs() curIntro.setOptions({ prevLabel: `上一步`, nextLabel: `下一步`, skipLabel: `跳过`, doneLabel: `完成`, tooltipPosition: `bottom` /* 引导说明框相对高亮说明区域的位置 */, hidePrev: `true`, // 隐藏第一步中的上一个按钮 tooltipClass: `` /* 引导说明文本框的样式 */, highlightClass: `` /* 说明高亮区域的样式 */, exitOnOverlayClick: false /* 是否允许点击空白处退出 */, showStepNumbers: false /* 是否显示说明的数据步骤*/, keyboardNavigation: false /* 是否允许键盘来操作 */, showButtons: true /* 是否按键来操作 */, showBullets: true /* 是否使用点点点显示进度 */, showProgress: false /* 是否显示进度条 */, scrollToElement: true /* 是否滑动到高亮的区域 */, overlayOpacity: 0.6 /* 遮罩层的透明度 */, positionPrecedence: [`bottom`, `top`, `right`, `left`] /* 当位置选择自动的时候，位置排列的优先级 */, disableInteraction: false, /* 是否禁止与元素的相互关联 */ hintPosition: 'top-middle', steps: allSteps }) curIntro.oncomplete(() => { // 点击结束按钮后执行的事件 console.log(`oncomplete`) }) curIntro.onexit(() => { // 点击跳过按钮后执行的事件 console.log(`onexit`) }) curIntro.onchange(() => { // 点击下一步执行的事件 console.log(`onchange`) }) curIntro.start() } onMounted(() => { nextTick(() => { initPageIntro() }) }) } } 1.TS封装方式实现 （1）安装Intro.js插件 npm install intro.js --save // 使用npm安装或 yarn add intro.js // 使用yarn安装 （2）创建TS文件进行封装 import introJs from 'intro.js' import 'intro.js/introjs.css' // introjs默认css样式 // import 'intro.js/themes/introjs-modern.css' // introjs主题 /** * @name: 新手指导 * @param {String} pathname 当前页面的path * @param {Array} stepsArr 步骤内容（包括element、intro） * @return {*} */ export function intro(pathname: any, stepsArr: any) { let guideObj = JSON.parse(localStorage.getItem('introCache')) || {} if (!guideObj[pathname]) { guideObj[pathname] = '1' localStorage.setItem('guide', JSON.stringify(guideObj)) introJs().setOptions({ prevLabel: "上一步", nextLabel: "下一步", skipLabel: "✕", doneLabel: "完成", tooltipPosition: "bottom" /* 引导说明框相对高亮说明区域的位置 */, hidePrev: "true", // 隐藏第一步中的上一个按钮 tooltipClass: "" /* 引导说明文本框的样式 */, highlightClass: "" /* 说明高亮区域的样式 */, exitOnOverlayClick: false /* 是否允许点击空白处退出 */, showStepNumbers: false /* 是否显示说明的数据步骤*/, keyboardNavigation: false /* 是否允许键盘来操作 */, showButtons: true /* 是否按键来操作 */, showBullets: true /* 是否使用点点点显示进度 */, showProgress: false /* 是否显示进度条 */, scrollToElement: true /* 是否滑动到高亮的区域 */, overlayOpacity: 0.6 /* 遮罩层的透明度 */, positionPrecedence: ["bottom", "top", "right", "left"] /* 当位置选择自动的时候，位置排列的优先级 */, disableInteraction: false, /* 是否禁止与元素的相互关联 */ hintPosition: 'top-middle', steps: stepsArr }).start() } } （3）代码实现 引导步骤1 引导步骤2 引导结束3333 import { intro } from "./introJs.ts" import { nextTick, onMounted } from "vue"; // 新手指导 const stepsArr = [{ element: '#one', //这是添加引导的元素id intro: '引导步骤11111111111111111', //这是引导提示内容 position: 'right' //这是引导位置 }, { element: '#two', intro: '步骤21111111111111111', position: 'left' }, { element: '#finally', intro: '引导结束3333333', position: 'top' }] onMounted(() => { // nextTick(() => { // introTS(“路由”, “参数”) // 调用函数并传参 intro(222221, stepsArr) // 调用函数并传参 // }) }) 额外：可以提供其他的样式进行指引。可以直接导入下方样式路径即可。
|
【本文地址】
公司简介
联系我们