在Vue3中使用Vue Tour实现页面导览

npm install v3-tour

import { createApp } from 'vue'
import App from './App.vue'
import VueTour from 'v3-tour'
import "v3-tour/dist/vue-tour.css"

const app = createApp(App)
app.use(VueTour)
app.mount('#app') 

<template>
  <div class="step" id="step1">1</div>
  <div class="step" id="step2">2</div>
  <div class="step" id="step3">3</div>

  <v-tour name="myTour" :steps="steps" :options="myOptions"></v-tour>
</template>

<script setup>
import { reactive, onMounted, getCurrentInstance } from 'vue'

const steps = reactive([
  {
    target: '#step1',
    header: {
      title: '步骤一'
    },
    content: '<div style="color: red; display: inline;">步骤一</div>内容'
  },
  {
    target: '#step2',
    header: {
      title: '这是第二步引导'
    },
    content: '你猜猜这个内容是什么!'
  },
  {
    target: '#step3',
    header: {
      title: '最后一步'
    },
    content: '你猜猜这个内容是什么!'
  }
])

const myOptions = reactive({
  useKeyboardNavigation: false,
  labels: {
    buttonSkip: '跳过',
    buttonPrevious: '上一步',
    buttonNext: '下一步',
    buttonStop: '完成'
  }
})
  
onMounted(() => {
  const internalInstance = getCurrentInstance()
  const $tours = internalInstance.appContext.config.globalProperties.$tours
  if ($tours && $tours['myTour']) {
    $tours['myTour'].start()
  }
})
</script>

<style scoped>
.step {
  height: 100px;
  width: 100px;
  background-color: #ccc;
}

#step2 {
  transform: translateX(500px) translateY(500px);
  background-color: red;
}

#step3 {
  background-color: blue;
}
</style>