前端使用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可以看一下官方文档,里面都很详细 官网连接

相关推荐
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒5 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员6 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐6 小时前
前端图像处理(一)
前端