Vue Tour封装实现统一的页面引导组件

npm install vue-tour

import Vue from 'vue'
import VueTour from 'vue-tour'
import 'vue-tour/dist/vue-tour.css'

Vue.use(VueTour)

<template>
  <div>
    <div v-if="showMask" class="mask"></div>
    <v-tour :name="name" :steps="steps">
      <template slot-scope="tour">
        <transition name="fade">
          <v-step
            v-if="tour.steps[tour.currentStep]"
            :key="tour.currentStep"
            :step="tour.steps[tour.currentStep]"
            :previous-step="tour.previousStep"
            :next-step="tour.nextStep"
            :stop="tour.stop"
            :skip="tour.skip"
            :is-first="tour.isFirst"
            :is-last="tour.isLast"
            :labels="tour.labels"
          >
          	<!-- 基于页面需要自定义使用，不用的话可以不需要插槽 -->
            <template #content>
              <slot :tour="tour"></slot>
            </template>
            <template #actions>
              <slot name="action" :tour="tour"></slot>
            </template>
          </v-step>
        </transition>
      </template>
    </v-tour>
  </div>
</template>

<script>
export default {
  name: 'v-tour-comp',
  props: {
    name: String,
    steps: Array
  },
  data() {
    return {
      showMask: false
    }
  },
  created() {
    this.setStepsBefore()
  },
  methods: {
    setStepsBefore() {
      // 引导前判断每一步的目标元素是否存在，保证渲染的位置是正确的
      this.steps.forEach((item) => {
        item.before = () =>
          new Promise((resolve, reject) => {
            const el = document.querySelector(item.target)
            if (!el) {
              reject(new Error('找不到元素'))
              return
            }
            resolve()
          })
      })
    },
    start() {
      this.showMask = true
      this.$tours[this.name]?.start()
    },
    stop() {
      this.showMask = false
      this.$tours[this.name]?.stop()
    },
    previousStep() {
      this.$tours[this.name]?.previousStep()
    },
    nextStep() {
      this.$tours[this.name]?.nextStep()
    }
  }
}
</script>

<style scoped lang="scss">
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: transparent;
}
</style>

<template>
  <div>
    <div class="step-1">我是第一步</div>
    <div class="step-2">我是第二步</div>

    <v-tour-comp ref="tour" :name="'guide-demo'" :steps="tourSteps">
      <template #content="{ tour }">
        <div>{{ tour.steps[tour.currentStep].content }}</div>
      </template>
      <template #action="{ tour }">
        <button @click="tour.previousStep" v-if="!tour.isFirst">上一步</button>
        <button @click="tour.nextStep" v-if="!tour.isLast">下一步</button>
        <button @click="tour.stop">结束</button>
      </template>
    </v-tour-comp>
  </div>
</template>

<script>
import VTourComp from '@/components/v-tour-comp.vue'

export default {
  components: { VTourComp },
  data() {
    return {
      tourSteps: [
        {
          target: '.step-1',
          content: '这是第一步，介绍页面某个功能'
        },
        {
          target: '.step-2',
          content: '这是第二步，继续讲解另一个部分'
        }
      ]
    }
  },
  mounted() {
    // 页面加载后自动触发引导
    this.$nextTick(() => {
      this.$refs.tour.start()
    })
  }
}
</script>