VUE + 分布式引导页Intro.js

初级见习猿工

已于 2023-12-15 10:41:35 修改

阅读量1.1k

点赞数 13

分类专栏：实用组件文章标签： javascript 开发语言 vue.js 前端 html

于 2023-12-15 10:12:32 首次发布

本文链接：https://blog.csdn.net/wgs__/article/details/134371071

版权

实用组件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简介

Intro.js是一个轻量级的JavaScript库，用于在网站或应用程序中创建交互式的引导页。可以向用户展示和解释界面的不同部分。

安装

npm方式

npm install intro.js --save

yarn方式

yarn add intro.js

实现

方式一（html直接使用）

如果用户指引内容比较简单并且固定，可以直接将属性写在html标签中，并调用introJs().start()。主要属性如下：

data-title：标题文字
data-intro：提示信息内容
data-step：步骤的编号（优先级）
data-tooltipClass：为提示定义CSS类
data-highlightClass：将CSS类附加到helperLayer
data-position：提示的位置，默认是bottom
data-scrollTo：滚动到的元素，element或tooltip。默认值为element。
data-disable-interaction：是否禁用与突出显示的框内的元素的交互

<template>
  <div data-title="test" data-intro="intro-test">
    data
  </div>
</template>

<script>
import introJs from "intro.js" // 引入intro.js
import "intro.js/introjs.css" // intro.js的样式

export default {

  data() {
    return {};
  },
	mounted() {
		this.$nextTick(() => {
			// Intro.js扫描页面并找到所有具有“data intro”属性的元素
			introJs().start();
		})
	},
  methods: {
		
	},
};
</script>

方式二（vue方式）

main.js 全局引入intro.js

import intro from 'intro.js' // introjs库
import 'intro.js/introjs.css' // introjs默认css样式
import 'intro.js/themes/introjs-modern.css' // introjs主题
 
// 全局挂载
Vue.prototype.$intro = intro

书写dom

<template>
  <div>
    <div id="dom1">
      <div>第一个div</div>
    </div>
    <div id="dom2">
      <div>第二个div</div>
    </div>
    <div id="dom3">
      <div>第三个div</div>
    </div>
  </div>
</template>

data内配置具体参数

data () {
    return {
      introOption: { // 参数对象
        prevLabel: '上一步',
        nextLabel: '下一步',
        skipLabel: '跳过',
        doneLabel: '完成',
        tooltipClass: 'intro-tooltip', /* 引导说明文本框的样式 */
        highlightClass: 'intro-highlight', /* 说明高亮区域的样式 */
        exitOnEsc: true, /* 是否使用键盘Esc退出 */
        exitOnOverlayClick: false, /* 是否允许点击空白处退出 */
        keyboardNavigation: true, /* 是否允许键盘来操作 */
        showBullets: false, /* 是否使用点显示进度 */
        showProgress: false, /* 是否显示进度条 */
        scrollToElement: true, /* 是否滑动到高亮的区域 */
        overlayOpacity: 0.5, // 遮罩层的透明度 0-1之间
        positionPrecedence: ['bottom', 'top', 'right', 'left'], /* 当位置选择自动的时候，位置排列的优先级 */
        disableInteraction: false, /* 是否禁止与元素的相互关联 */
        hidePrev: true, /* 是否在第一步隐藏上一步 */
        // hideNext: true, /* 是否在最后一步隐藏下一步 */
        steps: [], /* steps步骤，可以写个工具类保存起来 */
      },
      tipsImg1: require('./img/tips1.jpg'), // 新手引导的提示图片
      tipsImg2: require('./img/tips2.jpg') // 新手引导的提示图片
    }
  },

主要方法

定义一个initializeBoot方法绑定对应的元素以及事件

initializeBoot() {
  // 绑定dom元素的选择器数组
  this.introOption.steps = [
    // title 标题文字; element 需添加引导的元素选择器; intro 引导说明文字
    { title: "第一步", element: "#dom1", intro: `测试数据<img src="` + this.img1 + `" alt="" style="width: 100px;"/>` },
    { title: "第二步", element: "#dom2", intro: `测试数据<img src="` + this.img2 + `" alt="" style="width: 100px;"/>` },
    { title: "第三步", element: "#dom3", intro: "测试数据" },
        // ......
   ];
   // 绑定的事件
   this.$intro().setOptions(this.introOption)
     // 点击结束按钮执行
     .oncomplete(() => {
       console.log("点击结束按钮执行");
     })
     // 点击跳过按钮执行
     .onexit(() => {
       console.log("点击跳过按钮执行");
     })
     // 确认完毕按钮执行
     .onbeforeexit(() => {
       console.log("确认完毕按钮执行");
     })
     .start();
},

调用

在mounted生命周期内调用，为避免出现问题在nextTick内调用方法。一般引导都是在用户第一次访问时出现，这里使用本地存储实现。

mounted() {
  this.$nextTick(() => {
    if (!localStorage.getItem("First")) {
      this.initializeBoot();
      localStorage.setItem("First", true);
    }
  });
},

完整代码

<template>
  <div>
    <div id="dom1">
      <div>第一个div</div>
    </div>
    <div id="dom2">
      <div>第二个div</div>
    </div>
    <div id="dom3">
      <div>第三个div</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      introOption: {
        prevLabel: "上一步",
        nextLabel: "下一步",
        skipLabel: "跳过",
        doneLabel: "完成",
        tooltipClass: "intro-tooltip" /* 引导说明文本框的样式 */,
        highlightClass: "intro-highlight" /* 说明高亮区域的样式 */,
        exitOnEsc: true /* 是否使用键盘Esc退出 */,
        exitOnOverlayClick: false /* 是否允许点击空白处退出 */,
        keyboardNavigation: true /* 是否允许键盘来操作 */,
        showBullets: false /* 是否使用点显示进度 */,
        showProgress: false /* 是否显示进度条 */,
        scrollToElement: true /* 是否滑动到高亮的区域 */,
        overlayOpacity: 0.5, // 遮罩层的透明度 0-1之间
        positionPrecedence: ["bottom", "top", "right", "left"] /* 当位置选择自动的时候，位置排列的优先级 */,
        disableInteraction: false /* 是否禁止与元素的相互关联 */,
        hidePrev: true /* 是否在第一步隐藏上一步 */,
        hideNext: true /* 是否在最后一步隐藏下一步 */,
        steps: [] /* steps步骤 */,
      },
      // 如有引导的图片可以存入变量内
      img1: require("./assets/logo.png"),
      img2: require("./assets/logo.png"),
    };
  },
  mounted() {
    this.$nextTick(() => {
      if (!localStorage.getItem("First")) {
        this.initializeBoot();
        localStorage.setItem("First", true);
      }
    });
  },
  methods: {
    initializeBoot() {
      // 绑定dom元素的选择器数组
      this.introOption.steps = [
        // title 标题文字; element 需添加引导的元素选择器; intro 引导说明文字
        { title: "第一步", element: "#dom1", intro: `测试数据<img src="` + this.img1 + `" alt="" style="width: 100px;"/>` },
        { title: "第二步", element: "#dom2", intro: `测试数据<img src="` + this.img2 + `" alt="" style="width: 100px;"/>` },
        { title: "第三步", element: "#dom3", intro: "测试数据" },
        // ......
      ];
      // 绑定的事件
      this.$intro()
        .setOptions(this.introOption)
        // 点击结束按钮后执行的事件
        .oncomplete(() => {
          console.log("点击结束按钮后执行的事件");
        })
        // 点击跳过按钮后执行的事件
        .onexit(() => {
          console.log("点击跳过按钮后执行的事件");
        })
        // 确认完毕之后执行的事件
        .onbeforeexit(() => {
          console.log("确认完毕之后执行的事件");
        })
        .start();
    },
  },
};
</script>