vue3項目新用戶引導組件driver.js示例詳解

更新時間：2022年08月24日 15:34:11 作者：行者-龍

好用的用戶引導插件有?intro.js?和?driver.js?兩個，對比了一下，最終還是使用了driver.js，這篇文章主要介紹了vue3項目新用戶引導組件(driver.js),需要的朋友可以參考下

好用的用戶引導插件有 intro.js 和 driver.js 兩個，對比了一下，最終還是使用了driver.js
主要有以下原因：

用法簡單
可以商用
總要選一個吧

項目使用的是vue3+ts
因為多個地方需要使用引導，就直接做成組件使用
不廢話上代碼

yarn add driver.js
或者
npm i driver.js

組件代碼

在這里插入圖片描述

<!--
 * @Description: 新用戶引導組件
 * @LastEditTime: 2022-08-19 11:43:25
-->
<template></template>

<script lang="ts" setup>
import { onMounted } from "vue"
import "driver.js/dist/driver.min.css";
import Driver from "driver.js";
interface IPopover {
  title: string,
  description: string,
  position: string,
}
interface IStep {
  element: string,
  popover: IPopover
}
interface prop {
  storageName: string,
  steps: IStep[],
}
const props = withDefaults(defineProps<prop>(), {
  storageName: 'driver',
  steps:()=>[]
})
onMounted(() => {
  let flag = localStorage.getItem(props.storageName);
  if (!flag) {
    showTips();
  }
});
function showTips() {
  const driver = new Driver({
    prevBtnText: "上一步",
    nextBtnText: "下一步",
    doneBtnText: "我知道了",
    closeBtnText: "關閉",
    onReset: (ele: any) => {
      localStorage.setItem(props.storageName, JSON.stringify({ firstVisit: false }));
    },
  });
  driver.defineSteps(props.steps);
  driver.start();
}

</script>

頁面使用

導入組件
需要傳頁面名稱storageName用于判斷用戶是否第一次進入該頁面
steps這個頁面里面需要引導的內(nèi)容列表

<!--
 * @Description: 需要引導的頁面
 * @LastEditTime: 2022-08-19 11:41:55
-->
<template>
  <div class="test-guide">
    <h1>測試driver.js</h1>
    <el-button id="first-ele" type="primary">首頁</el-button>
    <el-button id="second-intro" type="warning">幫助</el-button>
    <el-button id="third-des" type="primary">聯(lián)系我們</el-button>
  </div>
  <Driver storageName='yingdaoye' :steps="steps"></Driver>
</template>

<script lang="ts" setup>
import Driver from '@/components/driver/index.vue'
const steps = [
    {
      element: "#first-ele",
      popover: {
        title: "這是本站首頁",
        description: "本站首頁是一些展示性的信息",
        position: "bottom",
      },
    },
    {
      element: "#second-intro",
      popover: {
        title: "這是幫助",
        description: "點此處可獲取一些本站的相關說明",
        position: "top",
      },
    },
    {
      element: "#third-des",
      popover: {
        title: "聯(lián)系我們",
        description: "點擊這里可獲取我們的相關信息",
        position: "right",
      },
    },
  ];
</script>

<style lang="scss" scoped>
</style>