- 博客(19)
- 收藏
- 关注
RSS订阅原创 Vue 3 自定义指令 v-loading：从原理到实战，打造轻量可复用的加载遮罩
本文深入讲解 Vue 3 自定义指令 v-loading 的完整实现，覆盖布尔值、对象配置与修饰符三种用法，支持局部、全屏、指定节点三种挂载位置，并自动适配 Arco Design 的 light/dark 主题。文章从效果图、用法示例到指令核心代码与样式实现，重点剖析加载遮罩的创建、挂载、显隐切换、延迟显示、滚动锁定及卸载恢复等关键逻辑，助你快速落地一套轻量、可复用的加载遮罩方案。
2026-08-28 17:52:06
400
原创 vue3基于pdfjs-dist实现分页、缩放、复制文字、缩略图跳转定位、360°旋转、一键放大/还原、水印文字......等等功能
本文介绍了一个基于pdfjs-dist实现的PDF阅读器组件开发过程，包含分页、缩放、文字复制、旋转、全屏等核心功能。组件采用pdfjs-dist@2.16.105版本，支持通过props配置PDF源、容器高度、初始缩放比例等参数。关键技术点包括：水印处理函数、分页计算逻辑、缩略图生成方法等。文章展示了组件效果图，并提到后续将开源完整代码，还规划了标注、高亮、编辑等8项待完善功能。这是技术小白的实践作品，欢迎指正共同进步。
2025-08-25 20:34:08
1221
3
原创 pdf预览
压缩时删除原始文件的配置：gzip-clear、brotli-clear、both-clear（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）# 压缩时不删除原始文件的配置：gzip、brotli、both（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）# 是否启用gzip压缩或brotli压缩（分两种情况，删除原始文件和不删除原始文件）
2025-01-02 11:25:35
215
原创 测试内部使用，用完就删
vue-tippy：是一个基于 Vue.js 的 tooltip 模块，它提供了高度可定制化且易于使用的提示组件。VueTippy 支持在你的 Vue 项目vue-types：中轻松创建交互式的、动态的提示、是一个为 Vue.js 设计的可配置的 prop 验证器集合，灵感来源于 React 的 prop-types。vxe-table：PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项。
2024-12-30 11:52:04
720
原创 JavaScript 将对象处理完拼接到URL
不会自动处理嵌套对象，所以这里进行了手动处理，将嵌套对象的键名用。对于更复杂的嵌套情况，可能需要递归处理。
2024-03-12 08:36:34
1310
1
原创 使用 ES6 语法封装的 `queryString` 函数，可以解析 URL 中的查询字符串，并以对象的形式返回结果。对于嵌套的对象，该函数也支持解析。
【代码】使用 ES6 语法封装的 `queryString` 函数，可以解析 URL 中的查询字符串，并以对象的形式返回结果。对于嵌套的对象，该函数也支持解析。
2023-11-13 11:37:30
412
原创 vue2.x 预览图片组件
前段时间接了新需求，需要对图片进行预览以及文件的下载，没找到合适的组件来实现这需求，最终自己写了该组件来实现此功能，该组件可预览图片、视频，均可下载，有旋转、放大/缩小功能。【该组件没有用到第三方插件实现】如果小伙伴们需要用到，可根据自己的需求进行修改效果图：（背景颜色值，可自行修改）用法：HTML片段：<template> <div id="picture-viewer" :style="maskContainer"...
2022-05-25 09:37:12
1886
原创 前端实现图片压缩，传给后端
function compressImg(path) { //压缩图片 let ImageWidth = 750 return new Promise((resolve, reject) => { let maxSize = 2 * 1024 * 1024 if (content.file.size < maxSize) { resolve(content.file) } else { var ca...
2021-10-09 16:03:09
367
原创 判断是否是字符串或数组或对象方法
exportdefault{isString(string){returnObject.prototype.toString.call(string)==='[objectString]';},isObject(obj){returnObject.prototype.toString.call(obj)==='[objectObject]';},isArray(array){returnObject.protot...
2021-07-05 16:31:41
1270
原创 wx.getUserProfile is not a function
微信 wx.getUserInfo 与 wx.getUserProfile 对比1.功能上是 wx.getUserInfo 不在返回用户授权的头像昵称，只返回匿名信息，但 wx.getUserProfile 会返回用户授权的头像昵称。2.wx.getUserInfo 授权成功后，当下次调用时，可以直接获取授权成功返回数据，不需要每次都需要用户确认，但 wx.getUserProfile 每次都需要用户确认允许后才能拿到用户信息3.对于业务来说，可以通过 wx.getUserProfile 获取用户
2021-04-07 13:07:17
3449
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人