V3 Admin Vite 内置组合式函数完全清单useWatermark 防删除水印、usePagination 分页神器 10 实战技巧【免费下载链接】v3-admin-vite☀️ AI-friendly Vue3 admin template | Vue Admin | Vue Template | Vue3 Admin | Vue3 Template | Vue 后台 | Vue 模板 | Vue3 后台 | Vue3 模板项目地址: https://gitcode.com/un-pany/v3-admin-viteV3 Admin Vite 是一款 AI 友好的 Vue3 后台管理模板内置 11 个开箱即用的组合式函数Composable涵盖防删除水印、标准分页、远程下拉、全屏 Loading、主题切换等高频场景让 Vue3 后台开发少写大量重复代码。 内置组合式函数一览所有 Composable 集中在 src/common/composables/ 目录共 11 个组合式函数核心能力适合场景useWatermark.ts防删除、防隐藏的水印数据敏感页面、截图溯源usePagination.ts标准分页数据 变化监听一切表格列表页useFetchSelect.ts接口驱动的下拉选项远程 Select 选择器useFullscreenLoading.ts给任意函数套上全屏 Loading导出、提交等耗时操作useTheme.ts默认/暗黑/深蓝三主题切换全局主题管理useTitle.ts动态设置浏览器标签标题路由页面useDevice.tsisMobile / isDesktop 响应式判断移动端适配useLayoutMode.ts侧边/顶部/混合布局切换布局设置useGreyAndColorWeakness.ts灰色模式、色弱模式无障碍体验useRouteListener.ts发布订阅式监听路由变化跨组件通信usePany.ts作者的小彩蛋通知了解项目周边官方还贴心地准备了对应演示页use-watermark.vue、element-plus/index.vue。 useWatermarkF12 删不掉的防删除水印这是整个清单里最有“防御性”的一个组合式函数。它把用户名、工号等信息渲染成 Canvas 背景图平铺到页面上即使有人打开控制台试图删除或隐藏水印也会被自动检测并重新挂回。防删除防御是如何实现的开启防御后默认开启内部用MutationObserver同时盯住两件事水印元素被改样式比如display: none→ 立即重建水印水印元素被从 DOM 移除→ 自动重新 append 回去同时用ResizeObserver监听容器尺寸变化窗口拉伸后水印自动铺满不留空白死角。核心逻辑见 useWatermark.ts#L179-L228。全局水印 vs 局部水印不传参数默认挂在document.body上整站生效布局入口 layouts/index.vue 里就是这么用的传入RefHTMLElement水印只出现在指定容器内实现“局部水印”演示页面里同时给了两组按钮// 局部水印只覆盖 localRef 这个卡片 const { setWatermark, clearWatermark } useWatermark(localRef) // 全局水印默认挂在 body 上 const { setWatermark: setGlobalWatermark } useWatermark()样式参数随意调setWatermark(text, config)第二个参数支持这些配置项见 DEFAULT_CONFIGcolor/opacity颜色与透明度size/family字号与字体angle倾斜角度默认 -20° 斜纹更耐截图width/height单块水印占据的宽高数值越大水印密度越低defense设为false可关闭防御性能敏感场景 usePagination三行代码搞定标准分页写后台列表页分页几乎永远绕不开。usePagination把 Element Plus 的el-pagination需要的所有状态都封装好了const { paginationData, resetCurrentPage, watchPagination } usePagination({ callback: getTableData // 页码/每页条数变化时自动执行 })它返回五个关键成员usePagination.ts#L25-L61paginationData响应式对象直接v-model:currentPage、v-model:page-size绑定到el-paginationhandleCurrentChange/handleSizeChange内置的页码、每页条数切换处理resetCurrentPage搜索/筛选条件变化后把页码拉回第 1 页已在第 1 页则直接触发回调watchPagination({ immediate: true })监听分页参数变化执行回调加immediate即可让页面一进就加载第一页默认参数很合理每页 10 条、可选 [10, 20, 50]、布局total, sizes, prev, pager, next, jumper全部可在初始化时覆盖。 其余 8 个组合式函数速览函数一句话说明使用要点useFetchSelect传入 api 函数自动返回loading / options / value远程下拉三件套挂载即请求useFullscreenLoading高阶函数把目标函数套上全屏 Loading适合“导出报表”“批量提交”useTheme切换默认 / 暗黑 / 深蓝带点击位置的圆形过渡动画依赖viewTransition主题名自动持久化useTitlesetTitle(xxx)设置标签页标题自动拼接项目名路由切换时调用useDevice返回isMobile/isDesktop响应式布局判断useLayoutModeisLeft / isTop / isLeftTopsetLayoutMode布局模式切换useGreyAndColorWeakness初始化灰色模式、色弱模式一次init即可useRouteListener基于 mitt 的发布订阅监听路由变化比watch路由更省渲染性能✨ 10 实战技巧清单水印默认开防御除非低端设备有性能压力才传defense: false水印太密挡视线调大width/height降低密度即可只给某个敏感卡片加水印时传局部Ref卸载时水印自动清理水印要在 DOM 挂载完成后设置否则会收到控制台警告分页回调里记得带上paginationData.currentPage和pageSize去请求接口筛选表单提交成功后先调resetCurrentPage()再查数据避免“第 5 页搜出 0 条”的经典 bug列表页初始化用watchPagination({ immediate: true })一进页面就拉数据需要“去 / 10 / 20 / 50 / 100 条”时初始化传pageSizes: [10, 20, 50, 100]只要数字跳转、不要总数把layout改成prev, pager, next, jumperuseFullscreenLoading套在提交函数外层用户就不会因为“没反应”重复点击远程下拉用useFetchSelect而不是自己写onMountedtry/finallyuseRouteListener里可以传immediate true订阅时立刻拿到最新路由适合“进来先判断一次”的场景写在最后V3 Admin Vite 把这 11 个组合式函数都放在了 src/common/composables/ 目录下每个文件独立、零耦合既可以整体使用也可以直接复制到自己的 Vue3 项目中单独取用。从防删除水印到分页神器这些“小而美”的工具函数正是它被称为 AI 友好 Vue3 后台模板的重要原因——照着 demo 页抄半天就能搭出生产级后台骨架。【免费下载链接】v3-admin-vite☀️ AI-friendly Vue3 admin template | Vue Admin | Vue Template | Vue3 Admin | Vue3 Template | Vue 后台 | Vue 模板 | Vue3 后台 | Vue3 模板项目地址: https://gitcode.com/un-pany/v3-admin-vite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考