学习记录|vue3项目新用户引导组件(driver.js) vue.js|前端|javascript

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

用法简单
可以商用
总要选一个吧

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

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

组件代码

文章图片

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(), { 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(); }

页面使用

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

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", }, }, ]; lang="scss" scoped>