嗨!这是你喜欢的新手引导组件

前言

社区有很多关于新手引导的组件,比如优秀的 driver.jsshepherdintrojs ...

但这些组件主要解决的还是静态页面的引导,适用于需要引导的功能都在静态页面上呈现出来的场景,如下所示:

但在我们业务开发当中,有很多动态组件的场景,就像我们玩游戏时的新手引导一样

但在web端,似乎还没类似的组件

在这种背景下 web-guide 🔥🔥🔥 孕育而生


项目地址:web-guide 要个start不过分吧😁

文档地址:文档


技术实现

新手引导组件是一个通用性组件,如果我们使用 vuereact进行封装的话,那只能适用于vuereact项目。

为了让web-guide更通用,最后采取 svelte进行开发,最后打包成原生JS

效果

如何使用

1. 安装

sh 复制代码
npm i @liuyahui666/web-guide -S

或者

sh 复制代码
yarn  add  @liuyahui666/web-guide -S

2. 使用

js 复制代码
import webGuide,{ defineConfig } from "@liuyahui666/web-guide";
import "@liuyahui666/web-guide/index.css"

new webGuide(defineConfig({
  target: document.querySelector("#app")!, // 页面的跟元素
  props: {
    settings: {
      immediate: true, // 是否立即触发引导
      logo:'', // 引导页的图片地址
      stepArr: [ // 每一步的配置
        {
          element: () => document.querySelector("#addDiv")!, // 在哪个元素上触发
          trigger: "click", // 如何触发  immediate为false时可忽略
          popover: {
            title:"请点击div", // 标题
            description:"点击div有惊喜哦", // 详情
          },
        },
        ...
      ],
    },
  },
}));

使用 defineConfig 可获取完整的类型提示

web-guide 组件实现细节

打包

整体使用的是 svelte 框架进行开发,使用 vite进行项目搭建。如果想打包成原生JS的话,只需要在 vite.config.tsbuild 选项进行配置即可

ts 复制代码
  build: {
      cssCodeSplit: true,
      lib: {
        entry: resolve(__dirname, "src/lib/index.ts"),
        name: "web-guide",
        fileName: (format) => `index.${format}.js`,
      },
    },

具体细节可参考源码

文档搭建

使用的是 vitepress

最后

如果在使用用遇到任何问题,欢迎 issues 😘

相关推荐
quan26315 分钟前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
小桥风满袖1 小时前
极简三分钟ES6 - 类与继承
前端·javascript
子兮曰1 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f1 小时前
📦 qiankun微前端接入实战
前端·javascript·面试
小桥风满袖1 小时前
极简三分钟ES6 - Symbol
前端·javascript
子兮曰1 小时前
🚀Map的20个神操作,90%的开发者浪费了它的潜力!最后的致命缺陷让你少熬3天夜!
前端·javascript·ecmascript 6
练习时长两年半的Java练习生(升级中)1 小时前
从0开始学习Java+AI知识点总结-30.前端web开发(JS+Vue+Ajax)
前端·javascript·vue.js·学习·web
良木林1 小时前
JS中正则表达式的运用
前端·javascript·正则表达式
芭拉拉小魔仙2 小时前
【Vue3+TypeScript】H5项目实现企业微信OAuth2.0授权登录完整指南
javascript·typescript·企业微信
吃饭睡觉打豆豆嘛3 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript