Пошаговое руководство по использованию intro.js

JavaScript
Пошаговое руководство по использованию intro.js

intro.jsЕго можно использовать как на ПК, так и на мобильном телефоне. Код будет объединен с vue для получения пошаговой справки.

演示图

Установить

npm install intro.js --save

Создайте новый файл intro.js для настройки вступления.

import introJs from 'intro.js'
import 'intro.js/introjs.css'

const intro = introJs()
// 更多配置参数请到官方文档查看
intro.setOptions({
  nextLabel: '下一个',  // 下一个按钮文字
  prevLabel: '上一个',  // 上一个按钮文字
  skipLabel: '跳过',    // 跳过按钮文字
  doneLabel: '立即体验',// 完成按钮文字
  hidePrev: true,       // 在第一步中是否隐藏上一个按钮
  hideNext: true,       // 在最后一步中是否隐藏下一个按钮
  exitOnOverlayClick: false,  // 点击叠加层时是否退出介绍
  showStepNumbers: false,     // 是否显示红色圆圈的步骤编号
  disableInteraction: true,   // 是否禁用与突出显示的框内的元素的交互，就是禁止点击
  showBullets: false          // 是否显示面板指示点
})

export default intro

Есть 2 способа использования

метод первый

Использование атрибутов HTML

  • data-intro: текст подсказки для шага

  • data-step: (необязательно) определяет номер (приоритет) шага

  • data-tooltipClass: (необязательно) определяет класс CSS для всплывающей подсказки.

  • data-highlightClass: (необязательно) добавить класс CSS к helperLayer

  • data-position: определяет положение подсказки, сверху, слева, справа, снизу, выравнивание по нижнему левому краю (то же, что и нижнее), выравнивание по нижнему центру, выравнивание по правому нижнему краю или авто (определяет положение компонента и автоматически назначает ему правильное положение). По умолчанию внизу

  • data-scrollTo: Прокрутите до элемента, элемента или всплывающей подсказки. Значение по умолчанию — элемент.

  • data-disable-interaction: отключить ли взаимодействие с элементом внутри выделенного поля, true или false (также (1 или 0)).

HTML-часть

<section class="nav-menu">
    <ul>
        <li :data-step="homeSteps.shifts.step" :data-intro="homeSteps.shifts.intro" :data-position="homeSteps.shifts.position" :data-disable-interaction="true">班次管理</li>
        <li :data-step="homeSteps.attendGroup.step" :data-intro="homeSteps.attendGroup.intro" :data-position="homeSteps.attendGroup.position" :data-disable-interaction="true">考勤组管理</li>
        <li :data-step="homeSteps.attendCount.step" :data-intro="homeSteps.attendCount.intro" :data-position="homeSteps.attendCount.position" :data-disable-interaction="true">考勤统计</li>
        <li :data-step="homeSteps.writeOff.step" :data-intro="homeSteps.writeOff.intro" :data-position="homeSteps.writeOff.position" :data-disable-interaction="true">核销统计</li>
    </ul>
</section>

js-часть

import Intro from '@/utils/intro'  // 引入写好的配置文件
export default {
    data () {
        homeSteps: {
          shifts: {
            step: '1',
            intro: '班次管理，配置上下班时间及各种人性化设置。',
            position: 'top'
          },
          attendGroup: {
            step: '2',
            intro: '考勤组管理，设置考勤方式、考勤时间等考勤规则。邀请人功能在这里。',
            position: 'top'
          },
          attendCount: {
            step: '3',
            intro: '考勤统计，随时可查看团队每日/月出勤情况。支持修改打卡结果。',
            position: 'top'
          },
          writeOff: {
            step: '4',
            intro: '核销统计，可查看修改打卡结果的历史记录。',
            position: 'top'
          }
        }
    },
    mounted () {
        if (!localStorage.getItem('isShowHelp')) {
          this.$nextTick(() => {
            // 开始
            Intro.start()
          })
          // 退出引导回调函数
          Intro.onexit(function () {
            localStorage.setItem('isShowHelp', 1)
          })
        }
    }
}

Способ 2

Использовать конфигурацию JSON

HTML-часть

<section class="nav-menu">
    <ul>
        <li id="step1">班次管理</li>
        <li id="step2">考勤组管理</li>
        <li id="step3">考勤统计</li>
        <li id="step4">核销统计</li>
    </ul>
</section>

js-часть

import Intro from '@/utils/intro'  // 引入写好的配置文件
export default {
    mounted () {
        if (!localStorage.getItem('isShowHelp')) {
          // 配置
          Intro.setOptions({
            steps: [
              {
                element: '#step1',  // 目标元素
                intro: '班次管理，配置上下班时间及各种人性化设置。',   // 提示文本
                position: 'top'     // 提示位置
              },
              {
                element: '#step2',
                intro: '考勤组管理，设置考勤方式、考勤时间等考勤规则。邀请人功能在这里。',
                position: 'top'
              },
              {
                element: '#step3',
                intro: '考勤统计，随时可查看团队每日/月出勤情况。支持修改打卡结果。',
                position: 'top'
              },
              {
                element: '#step4',
                intro: '核销统计，可查看修改打卡结果的历史记录。',
                position: 'top'
              }
            ]
          })
          this.$nextTick(() => {
            // 开始
            Intro.start()
          })
          // 退出引导回调函数
          Intro.onexit(function () {
            localStorage.setItem('isShowHelp', 1)
          })
        }
    }
}
Категории