如何实现一个优雅的通知中心？（Vue 3 + 消息队列实战）
写在开头 点赞 + 收藏 学会 前言 一个完善的通知系统可以显著提升用户体验，让用户及时了解： 新评论回复 文章被点赞 系统公告 签到奖励 今天分享如何实现一个优雅的通知中心！ 功能设计 通知类型 // src/types/notification.ts export typ ...
vue 甘特图 vxe-gantt 任务条拖拽自动更新日期
在项目管理过程中，计划总是赶不上变化。当任务时间需要调整时，手动修改开始/结束日期既繁琐又容易出错。vxe-gantt 提供了任务条拖拽功能，允许用户通过鼠标直接拖拽甘特条来调整任务的起止时间，同时自动更新数据中的日期字段，让排期调整变得直观高效。 启用任务条拖拽功能，并通过 mode: 'prog ...
如何使用GSAP实现一个 `pinned` 滚动楼层叙事？
写在开头 点赞 + 收藏 学会 准备工作 技术栈： vue + gsap 最近在做的一个动画，特意去网上查了一下叫 pinned 滚动叙事，感觉蛮有趣，分享给你们。 实现的动画如下： 对应的模仿网址是：www.vaporesso.com/series-prod… 思考过程 ...
vxe-table 实现编辑列的权限控制：列级与表级权限管理
在后台管理系统中，表格编辑权限的控制是一个常见需求。不同角色或不同用户可能对同一表格的不同列拥有不同的操作权限——例如，普通员工只能编辑部分字段，而管理员拥有全部编辑权限。vxe-table 提供了两种灵活的权限控制方式：列级权限控制（通过 editRender.enabled）和表级权限控制（通过 ...
vxe-table 配置 ajax 数据源：告别冗余代码，一键渲染表格
在后台管理系统中，表格数据通常来自后端接口。传统开发中，每个页面都需要重复编写请求逻辑、处理加载状态、解析返回数据等，代码冗余且维护困难。vxe-table 的 proxy-config 代理配置，允许你通过简单的配置将表格与数据源绑定，让组件自动管理数据加载，将你从重复劳动中解放出来。 列表配置 ...
极简开源看板！一款轻量化的项目管理工具！
kaneo —— 一个开源、自托管的项目管理平台，其核心理念是“极简主义”，旨在成为 Jira、Linear 等工具的一种轻量级替代方案。 ...
纯前端生成海报下载方案
写在开头 点赞 + 收藏 学会 Vue 实战：纯前端生成带中心 Logo 二维码的分享海报 在日常的 Web 业务中，经常会遇到“点击分享，生成一张包含用户信息、业务数据以及专属二维码的海报图”的需求。为了节省服务端资源，我们通常会采用纯前端的方案来完成海报的绘制与下载。 本 ...
Flex 布局的 `min-width: auto` 陷阱：为什么内容总是撑破容器？
写在开头 点赞 + 收藏 学会 布局踩坑｜CSS 冷门知识点 | 一个 flex 子项里放了长文本或长单词，明明设置了 width: 100%，容器却还是被撑破、出现横向滚动条？改 overflow: hidden 又会导致内容被裁掉、text-overflow: ellip ...
你的 uni-app 分页，一个 hook 搞定竞态和加载
写在开头 点赞 + 收藏 学会 大概也在 uni-app 项目里写过这样的分页加载——onReachBottom 里加一页、发请求、拼数组： <script setup> import { ref } from 'vue'; import { onReachBottom, o ...
我把网页上那团流动的彩色云雾，塞进了微信小程序
之前我在网页上做过一个好玩的东西：一颗胶囊形状的卡片，里面的颜色像水彩一样不停流动，鼠标划过去还会跟着加速。很多朋友问能不能在小程序里用。我试了才知道，网页上三行代码搞定的 canvas，到了小程序里完全是另一回事。这篇记录一下这团"云雾"从网页搬进微信小程序的过程，以及我最后把它封装成的到小程序 ...
vxe-table vue 表格实现复杂分组列头与数据合并：多级分类与动态合并实战
在商品管理、订单报表等业务场景中，我们常常需要展示多层级分类（如一级分类 → 二级分类 → 三级分类），并希望将相同分类的数据行纵向合并，让表格结构更清晰、数据层级一目了然。vxe-table 提供了灵活的列头分组（children）和单元格合并（mergeCells）机制，可以轻松实现“复杂表头 ...
vue 表格 vxe-table 如何实现折叠列功能
在数据表格中，当列数过多时，用户往往需要根据当前关注的数据维度，临时隐藏或展开某些列。vxe-table 提供了灵活的列显示控制 API（showColumn / hideColumn），结合自定义表头插槽，可以轻松实现类似“折叠面板”的列分组折叠功能。 实现思路 列分组结构：通过 children ...
开源自托管！一款轻量的个人笔记库！
Rote —— 一个开源的、注重“克制体验”的个人笔记与知识库系统，提供一个优雅、自托管的记录平台，具备个人随笔、灵感记录、公开动态分享等功能。 ...
私传网（Send.wang）：一款基于 WebRTC 技术的纯网页端点对点（P2P）文件传输工具
私传网（Send.wang）是一款基于 WebRTC 技术的纯网页端点对点（P2P）文件传输工具，它无需下载任何 App 或注册账号，只需在任意现代浏览器（如 Chrome、Safari）打开网页即可使用。这使其能在 Windows、macOS、Linux、Android、iOS 等全平台间互通互传... ...
一个网页搞定数据库 ER 图！一款开源数据库结构可视化编辑器！
chartdb —— 一款功能强大的基于 Web 的数据库表可视化编辑器，无需数据库账号密码即可生成数据库表关系图，支持 Docker 私有化部署，兼容 Open AI 等大模型实现 AI 建表、跨数据库 DDL 转换。 ...
侧边栏收起缩放适配方案
写在开头 点赞 + 收藏 学会 一、问题描述 在 OverallProcurementDashboard 和 OrderDataPanel 两个大屏看板页面中，使用 CSS scale 缩放方案来适配不同屏幕尺寸。当用户点击收起左侧菜单栏时，会出现以下两个问题： 竖向滚动条出 ...
修改 vxe-table vue 表格数据校验提示框样式
在表格内编辑数据时，校验提示是引导用户正确输入的重要手段。vxe-table 提供了便捷的 CSS 变量方案，让你无需编写复杂的样式覆盖代码，即可调整校验提示框的字体大小、内边距等样式，使其与项目整体视觉风格保持一致。 CSS 变量 vxe-table 的校验提示框（单元格校验错误信息）支持以下 C ...
如何设置 vxe-form 表单校验提示框的样式
在后台管理系统中，表单校验是保证数据质量的关键环节。vxe-form 默认的校验提示样式可能无法完全匹配项目的视觉风格。vxe-form 提供了简洁的 CSS 变量方案，让你可以轻松调整校验提示框的字体大小、内边距、颜色等样式，无需编写复杂的样式覆盖代码。 CSS 变量 vxe-form 的校验提示 ...
JavaScript 实现 RTF 转 PDF：React 项目完整教程
引言 在 Web 应用中处理文档格式转换一直是前端开发中的难点。传统方案通常依赖服务端接口，但这也带来了额外的服务器成本和网络延迟。随着 WebAssembly 技术的成熟，如今我们可以在浏览器端直接完成 RTF 到 PDF 的转换，本文将分享一种基于 WASM 的实现方案。 环境准备与安装配置 在 ...
vue 如何表格单元格中渲染进度条显示进度
在数据报表或管理后台中，用进度条直观展示任务完成度、资源利用率或评分等数值，能极大提升数据的可读性。vxe-table 通过内置的 progress 渲染器，让你在表格单元格中一键渲染进度条，并支持丰富的自定义样式和交互。 配置 在列定义中，通过 cellRender 属性指定渲染器为 'progr ...
