做pc端网站精英,政务服务中心网站建设实施方案,网站备案被注销 2016,网站过期后一、介绍 Intro.js 是一个用于创建网站用户引导、功能介绍和教程的 JavaScript 库。它允许开发者通过步骤和提示突出显示网站上的特定元素#xff0c;以帮助用户更好地了解和使用网站的功能。以下是 Intro.js 的一些关键特点和用法介绍#xff1a; 更多Intro.js 功能网址以帮助用户更好地了解和使用网站的功能。以下是 Intro.js 的一些关键特点和用法介绍 更多Intro.js 功能网址Intro.js Themes | Intro.js Docs 二、主要特点 用户引导 Intro.js 可以创建引导引导用户在网站上执行特定的操作或了解关键功能。步骤和提示 可以定义引导中的每个步骤并为每个步骤提供提示包括标题、描述和位置。高亮显示元素 Intro.js 允许高亮显示网站上的特定元素使其在引导中更为突出。导航按钮 提供导航按钮使用户能够在引导的步骤之间进行切换。自定义样式 Intro.js 允许开发者自定义引导的样式以匹配网站的设计风格。 三、代码实现 1.JS方式实现 1安装Intro.js插件 npm install intro.js --save // 使用npm安装 或 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引导 templatediv classcontainerdiv idone引导111111/divdiv idtwo引导2222222/div/divdiv idfinally引导333333/div /template script 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, //这是添加引导的元素idintro: 引导一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()})})} } /script1.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] 1localStorage.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代码实现 templatediv classcontainerdiv idone引导步骤1/divdiv idtwo引导步骤2/div/divdiv idfinally引导结束3333/div /template script setup langts import { intro } from ./introJs.ts import { nextTick, onMounted } from vue;// 新手指导 const stepsArr [{element: #one, //这是添加引导的元素idintro: 引导步骤11111111111111111, //这是引导提示内容position: right //这是引导位置 }, {element: #two,intro: 步骤21111111111111111,position: left }, {element: #finally,intro: 引导结束3333333,position: top }] onMounted(() {// nextTick(() {// introTS(“路由”, “参数”) // 调用函数并传参intro(222221, stepsArr) // 调用函数并传参// })})/script额外 可以提供其他的样式进行指引。可以直接导入下方样式路径即可。