安装

npm install guide-tour --save

注册

import GuideTour from 'guide-tour'

Vue.use(GuideTour)

使用

<template>
  <div class="about">
    <div class="step-wrap">
      <div id="tour-step1">step1</div>
      <div id="tour-step2">step2</div>
      <div id="tour-step3">step3</div>
    </div>
    <GuideTour ref="guideTourRef" :steps="steps" />
  </div>
</template>
<script setup>
  import { ref, onMounted } from 'vue'

  const steps = {
    step1: {
      content: `<p>此操作将会引导您了解页面功能，建议完成操作步骤引导。如已经完成配置操作，您可以点击【跳过】</p>`,
      placement: 'bottom', // top | right | bottom | left
      title: '用户功能引导',
    },
    step2: {
      content: `<p>步骤1。</p>`,
      placement: 'bottom',
    },
    step3: {
      content: `<p>步骤2。</p>`,
      placement: 'bottom',
    },
  }
  const guideTourRef = ref(null)
  onMounted(() => {
    guideTourRef.value.start()
  })
</script>