vue3项目新用户引导组件(driver.js)

好用的用户引导插件有 intro.js 和 driver.js 两个，对比了一下，最终还是使用了driver.js
主要有以下原因：

1. 用法简单
2. 可以商用
3. 总要选一个吧

项目使用的是vue3+ts
因为多个地方需要使用引导，就直接做成组件使用
不废话上代码

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

组件代码

<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>

页面使用

1. 导入组件
2. 需要传页面名称storageName用于判断用户是否第一次进入该页面
3. steps这个页面里面需要引导的内容列表

<template>
  <div class="test-guide">
    <h1>测试driver.jsh1>
    <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">联系我们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: "联系我们",
        description: "点击这里可获取我们的相关信息",
        position: "right",
      },
    },
  ];
script>

<style lang="scss" scoped>
style>

因为项目中使用时没有其他的要求 够用就行，后期如果有其他的要求可以再修改，嘿嘿