vue使用intro.js引导组件

通常进入一个项目会有一个用户引导,我们今天来说一下

1.intro.js官网

intro.js官网

2.下载intro.js

通常有两种方式
第一种:使用 npm 安装 npm install intro.js --save
第二种:在package.json内写入想要安装的版本,在npm i;我使用的是"intro.js": "^5.0.0",版本

3.在main.js文件中引入组件并挂载到实例上

import intro from 'intro.js' // introjs库
import 'intro.js/introjs.css' // introjs默认css样式
import 'intro.js/themes/introjs-modern.css' // introjs主题

// 加到prototype中，直接通过vue实例就能调用intro了
Vue.prototype.$intro = intro

// 封装一个v-intro-if指令，这样就可以在循环中展示符合特定条件的引导了
Vue.directive('intro-if', {
  bind: function (el, binding) {
    if (binding.value === false) {
      delete el.dataset.intro
      delete el.dataset.hint
    }
  }
})

4.在页面中使用

 <div id="app">
    <img data-intro="这是一张普通的图片" data-step="1" src="./assets/logo.png" />
    <HelloWorld />
    <h2>v-intro-if测试</h2>
    <ol>
      <li v-for="item in fruits" :key="item">
        <span v-intro-if="item === 'banana'" data-intro="这是香蕉">{{ item }}</span>
      </li>
    </ol>
    <button @click="viewIntro()" data-intro="点击这里可以重新查看向导内容">查看向导</button>
  </div>

data-step="1" 代表显示的步骤顺序
data-intro="这是一张普通的图片" 引号内代表显示的信息文字

js逻辑

  mounted() {
    this.$nextTick(() => {
      if (
        localStorage.getItem("isFirst") === null ||
        localStorage.getItem("isFirst") !== "1"
      ) {
        this.$intro().start();
        localStorage.setItem("isFirst", 1);
      }
    });
  },

 methods: {
    viewIntro() {
      // this.$intro().start();
      this.$intro()
        .setOptions({
          nextLabel: "下一个", // 下一个按钮文字
          prevLabel: "上一个", // 上一个按钮文字
          skipLabel: "跳过", // 跳过按钮文字
          doneLabel: "立即体验", // 完成按钮文字
          hidePrev: true, // 在第一步中是否隐藏上一个按钮
          hideNext: true, // 在最后一步中是否隐藏下一个按钮
          exitOnOverlayClick: false, // 点击叠加层时是否退出介绍
          showStepNumbers: false, // 是否显示红色圆圈的步骤编号
          disableInteraction: true, // 是否禁用与突出显示的框内的元素的交互，就是禁止点击
          showBullets: true, // 是否显示面板指示点
          tooltipPosition: "bottom" /* 引导说明框相对高亮说明区域的位置 */,
          tooltipClass: "intro-tooltip" /* 引导说明文本框的样式 */,
          highlightClass: "intro-highlight" /* 说明高亮区域的样式 */,
          exitOnEsc: true /* 是否使用键盘Esc退出 */,
          helperElementPadding: 2 /* 提示边框的padding */,
          keyboardNavigation: true /* 是否允许键盘来操作 */,
          showButtons: true /* 是否按键来操作 */,
          showProgress: false /* 是否显示进度条 */,
          scrollToElement: true /* 是否滑动到高亮的区域 */,
          overlayOpacity: 0.7 /* 遮罩层的透明度 */,
          /* 当位置选择自动的时候，位置排列的优先级 */
          positionPrecedence: ["bottom", "top", "right", "left"]
          /* 是否在第一步隐藏上一步 */
          // hidePrev: true,
          /* 是否在最后一步隐藏下一步 */
          // hideNext: true,
          /* steps步骤，可以写个工具类保存起来 */
          // steps: []
        })
        .start();
    }
  }