Vue Tour封裝實(shí)現(xiàn)統(tǒng)一的頁(yè)面引導(dǎo)組件

更新時(shí)間：2025年05月18日 14:24:23 作者：前端碼農(nóng)小黃

項(xiàng)目開(kāi)發(fā)過(guò)程中需要實(shí)現(xiàn)用戶引導(dǎo)功能,經(jīng)過(guò)調(diào)研發(fā)現(xiàn)一個(gè)好用的 Vue 插件 vue-tour,下面我們就來(lái)看看如何基于 vue-tour 封裝一個(gè)統(tǒng)一的引導(dǎo)組件吧

項(xiàng)目開(kāi)發(fā)過(guò)程中需要實(shí)現(xiàn)用戶引導(dǎo)功能，經(jīng)過(guò)調(diào)研發(fā)現(xiàn)一個(gè)好用的 Vue 插件 vue-tour，今天就來(lái)分享一下我是如何基于 vue-tour 封裝一個(gè)統(tǒng)一的引導(dǎo)組件，方便后續(xù)在多個(gè)頁(yè)面復(fù)用的。

第一步：安裝 vue-tour 插件

首先安裝：

npm install vue-tour

然后在項(xiàng)目的 main.js 中進(jìn)行全局注冊(cè)：

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

Vue.use(VueTour)

第二步：封裝統(tǒng)一引導(dǎo)組件

我們希望做到的效果是：不管哪個(gè)頁(yè)面需要引導(dǎo)，只需要引入這個(gè)組件，傳入 name 和 steps，然后調(diào)用 start() 方法即可開(kāi)啟引導(dǎo)。

于是我們封裝了一個(gè)組件 v-tour-comp.vue，完整代碼如下：

<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"
          >
          	<!-- 基于頁(yè)面需要自定義使用，不用的話可以不需要插槽 -->
            <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() {
      // 引導(dǎo)前判斷每一步的目標(biāo)元素是否存在，保證渲染的位置是正確的
      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>

核心邏輯說(shuō)明：

我們通過(guò) setStepsBefore 方法，確保每一步引導(dǎo)的目標(biāo) DOM 元素在頁(yè)面上是存在的；

對(duì)外暴露 start()、stop() 等方法，方便外部調(diào)用控制；

使用插槽 <slot> 提供自定義內(nèi)容和操作按鈕的能力；

加一個(gè) mask 遮罩層可以讓用戶更聚焦當(dāng)前引導(dǎo)區(qū)域（當(dāng)然你可以自定義背景色等樣式）。

第三步：在頁(yè)面中使用

在你需要引導(dǎo)的頁(yè)面中，只需要這樣用：

<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">結(jié)束</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: '這是第一步，介紹頁(yè)面某個(gè)功能'
        },
        {
          target: '.step-2',
          content: '這是第二步，繼續(xù)講解另一個(gè)部分'
        }
      ]
    }
  },
  mounted() {
    // 頁(yè)面加載后自動(dòng)觸發(fā)引導(dǎo)
    this.$nextTick(() => {
      this.$refs.tour.start()
    })
  }
}
</script>

結(jié)語(yǔ)

通過(guò)封裝這個(gè)組件，我們可以在項(xiàng)目中非常方便地添加用戶引導(dǎo)，只需要：

傳入 steps；
引用組件；
調(diào)用 start()。

對(duì)于提升用戶上手效率、降低學(xué)習(xí)成本、增強(qiáng)產(chǎn)品友好性來(lái)說(shuō)，這樣的小工具非常值得一試。

到此這篇關(guān)于Vue Tour封裝實(shí)現(xiàn)統(tǒng)一的頁(yè)面引導(dǎo)組件的文章就介紹到這了,更多相關(guān)Vue Tour頁(yè)面引導(dǎo)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: