前端使用intro.js实现页面操作引导

前言

Intro.js的官方文档:introjs.com/docs/gettin... 利用Intro.js实现简单的新手引导

效果:

下载依赖配置

打开官网可以看到官网的下载依赖

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

当然也可以下载到本地引入使用 连接

打开连接引入对应版本的js文件和css文件(连接为线上地址,可以打开把内容复制到本地文件中引入)

页面引入实现效果

1.引入js和css文件(这里我是下载到了本地)

HTML 复制代码
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="./introjs.css" />
</head>
<script type="text/javascript" src="./intro.js"></script>

2.DOM元素,其中data-intro是每一步的备注讲解;data-step是第几步第几步

HTML 复制代码
<div id="app">
        <div class="v2">
            <div class="v" data-step="1" data-intro="第1步,先这样" style="width: 100px;">我                                是内容1</div>
            <div class="v" data-step="2" data-intro="第2步,再先这样" style="width: 100px;">我是内容2</div>
            <div class="v" data-step="3" data-intro="第3步,最后这样" style="width: 100px;">我是内容3</div>
        </div>
        <el-button @click="caozuo()">操作引导</el-button>
    </div>

3.调用方法 其中mounted里面是打开页面就调用,当然也可以通过按钮去调用方法。 confirm("请确认是否退出操作引导")为退出操作引导时的一个确认信息

js 复制代码
<script>
        let vm = new Vue({
            el: '#app',
            data: {
                
            },
            mounted() {
                introJs(".v2").onbeforeexit(function () {
                    return confirm("请确认是否退出操作引导");
                }).start()
            },
            methods: {
                caozuo() {
                    introJs(".v2").onbeforeexit(function () {
                        return confirm("请确认是否退出操作引导");
                    }).start()
                }
            }
        })
    </script>

更多配置(调用方式分为两种)

1.有一些常用配置项帮大家列举出来可自行根据需求更改

js 复制代码
introJs('.v2').setOptions({
                nextLabel: "下一步", // 下一个的按钮文字
                prevLabel: "上一步", // 上一个按钮文字
                //   skipLabel: "跳过", // 跳过指引的按钮文字
                doneLabel: "完成", // 完成按钮的文字
                hidePrev: false, // 是否在第一步中隐藏"上一步"按钮;不隐藏,将呈现为一个禁用的按钮
                hideNext: false, // 是否在最后一步中隐藏"下一步"按钮(同时会隐藏完成按钮);不隐藏,将呈现为一个禁用的按钮
                exitOnEsc: true, // 点击键盘的ESC按钮是否退出指引
                exitOnOverlayClick: false, // 点击遮罩层时是否退出介绍
                showStepNumbers: false, // 是否显示步骤编号
                disableInteraction: true, // 是否禁用高亮显示框内元素的交互
                showBullets: true, // 是否显示面板的指示点
                overlayOpacity: 0.7, // 遮罩层的透明度 0-1之间
                helperElementPadding: 10, // 选中的指引元素周围的填充距离
                showProgress: true, //进度条
            })
            // 点击结束按钮后执行的事件
            .oncomplete(() => {
            })
            // 点击跳过按钮后执行的事件
            .onexit(() => {
            })
            // 确认完毕之后执行的事件
            .onbeforeexit(() => {
              localStorage.setItem("introValue1","true")
            }).start();

根据DOM元素ID进行引导

js 复制代码
// 绑定标签元素的选择器数组
      let yindaoList = [
        {
          element: document.querySelector('#problemDescription'), // 定位到相应的元素位置,如果不设置element,则默认展示在屏幕中央
          title: '提交工单', // 标题
          intro: '这里用来描述您的问题' // 内容
        },
        {
          element: document.querySelector('#attachments'), 
          title: '提交工单', // 标题
          intro: '这里可以上传附件' // 内容
        },
        {
          element: document.querySelector('#telephone'), 
          title: '提交工单', // 标题
          intro: '留下您的电话吧~方便专业顾问联系您' // 内容
        },
        {
          element: document.querySelector('#submit'), 
          title: '提交工单', // 标题
          intro: '别忘了要点击提交' // 内容
        },
        {
          element: document.querySelector('#historicalWorkOrder'), 
          title: '提交工单', // 标题
          intro: '这里可以查看历史提交工单' // 内容
        },
      ];
introJs().setOptions({
                steps: yindaoList, //上面声明的数组
                nextLabel: "下一步", // 下一个的按钮文字
                prevLabel: "上一步", // 上一个按钮文字
                //   skipLabel: "跳过", // 跳过指引的按钮文字
                doneLabel: "完成", // 完成按钮的文字
                hidePrev: false, // 是否在第一步中隐藏"上一步"按钮;不隐藏,将呈现为一个禁用的按钮
                hideNext: false, // 是否在最后一步中隐藏"下一步"按钮(同时会隐藏完成按钮);不隐藏,将呈现为一个禁用的按钮
                exitOnEsc: true, // 点击键盘的ESC按钮是否退出指引
                exitOnOverlayClick: false, // 点击遮罩层时是否退出介绍
                showStepNumbers: false, // 是否显示步骤编号
                disableInteraction: true, // 是否禁用高亮显示框内元素的交互
                showBullets: true, // 是否显示面板的指示点
                overlayOpacity: 0.7, // 遮罩层的透明度 0-1之间
                helperElementPadding: 10, // 选中的指引元素周围的填充距离
                showProgress: true, //进度条
            })
            // 点击结束按钮后执行的事件
            .oncomplete(() => {
            })
            // 点击跳过按钮后执行的事件
            .onexit(() => {
            })
            // 确认完毕之后执行的事件
            .onbeforeexit(() => {
              localStorage.setItem("introValue1","true")
            }).start();

结束

最后希望本篇文章能够帮助小伙伴们,更多详细配置api可以看一下官方文档,里面都很详细 官网连接

相关推荐
王哈哈^_^43 分钟前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具2 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
Yaml44 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶4 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json