vue3使用introjs页面引导

下载

npm install intro.js --save

import 'intro.js/introjs.css';
import IntroJs from 'intro.js'; 可以在引入皮肤的样式，支持主题设置

主要介绍几种用法

1、 不展示按钮，让用户点击指示点进行（一般不会这么干）

image.png

introJs().setOptions({
  showButtons: false
}).start()

2、可在引导页中添加进度条

image.png

introJs().setOptions({
  showProgress: true,
}).start()

3、引导页中设置类名

image.png

introJs().setOptions({
  tooltipClass: 'customTooltip'
}).start()

.customTooltip * {
  color: #4a4a4a;
  font-size: 18px
}

.customTooltip .introjs-tooltip-title {
  color: #0a41c9;
}

4、可设置一进入页面中心的提示,element属性不设置，默认在页面中间位置

image.png

introJs().setOptions({
  steps: [{
    title: 'Welcome',
    intro: 'Hello World! 👋'
  },
  {
    element: document.querySelector('.card-demo'),
    intro: 'This <b>STEP</b> focuses on an image. <br/> We also used some HTML tags!'
  },
  {
    title: 'Farewell!',
    element: document.querySelector('.card__image'),
    intro: '<img src="https://images.unsplash.com/photo-1608096299210-db7e38487075?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" />'
  }]
}).start();

5、不展示引导页提示，会在要展示的地方有个按钮闪烁，点击后提示引导

image.png
image.png

introJs().addHints();

6、可以直接在元素标签上使用data-intro and data-title最后调用introJs().start()；要是很复杂的话，看下面的7

image.png

<div data-title="Welcome!" data-intro="Hello World! 👋" class="card-demo">
  <div class="card shadow--md">
    <div class="card__image" data-intro="Intro.js can highlight on elements">
      <img
        src="..."
        alt="Image alt text"
        title="Logo Title Text 1"
      />
    </div>
    <div class="card__body" data-title="Farewell!" data-intro="And this is the last step!">
      <h4>Quaco Lighthouse</h4>
      <small>
        The Quaco Head Lighthouse is a well maintained lighthouse close to St.
        Martins. It is a short, beautiful walk to the lighthouse along the
        seashore.
      </small>
    </div>
  </div>
</div>


introJs().start();

7、通过setOptions定制化

image.png

introJs().setOptions({
  steps: [{
    title: 'Welcome',
    intro: 'Hello World! 👋'
  },
  {
    element: document.querySelector('.card-demo'),
    intro: 'This step focuses on an image'
  },
  {
    title: 'Farewell!',
    element: document.querySelector('.card__image'),
    intro: 'And this is our final step!'
  }]
}).start();

8、当前引导页只展示一次，设置dontShowAgain:true即可，默认提示语是英文的，dontShowAgainLabel可自定义设置，之后不在展示，会用cookie存储判断，可设置 名称及有效期

image.png

introJs().setOption({
dontShowAgain: true,
dontShowAgainLabel: '当前引导页提示后，不在显示',
}).start();

9、可以设置引导页每次展示的位置不同，通过position即可

image.png

introJs().setOptions({
  steps: [
  {
    element: document.querySelector('.card-demo'),
    intro: 'Tooltip has position right',
    position: 'right'
  },
  {
    element: document.querySelector('.card-demo-link'),
    intro: 'Tooltip has position left',
    position: 'left'
  },
  {
    element: document.querySelector('.card-demo-text'),
    intro: 'Tooltip has position bottom',
    position: 'bottom'
  },
  {
    element: document.querySelector('.card-demo'),
    intro: 'Tooltip has position top',
    position: 'top'
  }]
}).start();

10、设置showBullets指示点的隐藏/展示

image.png

introJs().setOptions({
  showBullets: false
}).start()

11、还有其他的api，大家可以去官网查看
12、vue3中只能使用setOptions去使用，不能使用标签的形式data-title的方式

        const leftMenu = ref(null);
        onMounted(() => {
            IntroJs()
                .setOptions({
                    prevLabel: '上一步',
                    nextLabel: '下一步 ',
                    doneLabel: '我知道了',
                    showProgress: false, //todo 不展示进度条
                    disablInteraction: true,
                    exitOnOverlayClick: false, //todo 不允许点击空白处关闭
                    showStepNumbers: false, //todo 是否展示步数步骤
                    showButtons: true, //todo  是否展示底部按钮
                    showBullets: true, //todo 是否使用指示点展示进度
                    scrollToElement: true, //todo 是都滑动到高亮的区域
                    overlayOpacity: 0.6, //todo 遮罩层的透明度
                    // skipLabel: '退出',//todo 右上角的关闭按钮，可定制
                    // tooltipPosition: 'top',//todo 工具默认提示的位置，一般不设置即可
                    dontShowAgain: true,
                    dontShowAgainLabel: '当前引导页提示后，不在显示',
                    exitOnEsc: false, //todo 键盘的退出键，默认允许关闭，可设置不关闭
                    buttonClass: '', //todo 提示按钮的样式
                    steps: [
                        {
                            title: '欢迎进入宛励空间',
                            intro: '请完成页面知道在关闭引导页',
                        },
                        {
                            element: leftMenu.value.$el,
                            title: '左侧菜单',
                            intro: '一般我们可以在这个地方切换',
                            position: 'right',
                        },
                    ],
                })
                  //当点击最后一步之后，我们可以进行操作
                .onbeforeexit(() => {
                    return ElMessage.success('111111');
                })
                .start();
        });