- 博客(99)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 文件预览 -- pdf
本文介绍了两种PDF预览方案：方案1使用iframe实现简单预览，但在微信内置浏览器中无法正常显示；方案2推荐使用pdfjs-dist 3.4.120版本实现兼容性更好的预览功能。方案2提供了完整的Vue组件代码，包括文件上传、PDF加载、分页渲染和滚动监听等功能，支持多种文件来源（Blob URL、Data URL、ArrayBuffer等），并实现了页面懒加载优化性能。文中还包含错误处理和资源清理等细节，特别适合需要在微信浏览器中实现PDF预览的场景。
2025-12-16 18:59:38
901
原创 vant组件封装
1.下拉多选1MultipleSelect.vue2.下拉多选二MultipleSelect2.vue3.带快捷选项的日期范围选择器CustomDatePicker.vue
2025-12-08 17:07:21
899
原创 身份证号码、手机号码脱敏
本文介绍了两段JavaScript代码，用于对敏感信息进行脱敏处理。身份证脱敏函数desensitizeIdCard分别处理15位和18位身份证号码，保留首6位和末4位，中间用星号代替。手机号脱敏函数desensitizePhone将11位手机号保留前3位和后4位，中间4位显示为星号。这些方法能有效保护用户隐私，适用于需要展示敏感信息但又不泄露完整数据的场景。
2025-11-14 10:08:36
355
原创 Three.js
本文介绍了一个基于Three.js的3D场景基础实现示例，主要包含以下内容： 核心组件：创建场景(Scene)、相机(Camera)和渲染器(Renderer)的基本配置，包括抗锯齿、透明背景等优化设置。 光照系统：实现了环境光(AmbientLight)、半球光(HemisphereLight)和平行光(DirectionalLight)三种光源类型。 交互功能： 摄像机控制器(OrbitControls/TrackballControls) 点击事件检测(Raycaster) 鼠标悬停交互 3D对象：
2025-10-29 16:45:27
995
原创 自定义组件（移动端下拉多选）中使用 v-model
本文介绍了Vue 3中v-model的两种实现方式：传统方式使用defineProps/defineEmits和3.4+版本新增的defineModel宏。通过一个多选下拉组件MultipleSelect的实现，展示了如何通过v-model进行父子组件数据绑定。在传统方式中需要手动处理modelValue属性和update:modelValue事件，而defineModel宏则简化了这一过程，自动处理双向绑定。文章还演示了如何通过参数修改默认绑定的属性名，如将modelValue改为value。两种方式都能
2025-10-23 13:50:25
332
原创 h5 自适应 Vant使用
本文介绍了Vant组件库的安装、按需引入样式配置和Rem布局适配方案。主要内容包括：1）区分Vue3和Vue2的安装命令；2）通过unplugin插件实现按需引入组件的配置方法，分别提供Vite和vue-cli项目的配置示例；3）Rem适配方案，包含postcss-pxtorem配置和动态调整根字体大小的实现，并处理了横竖屏切换场景。文中提供了完整的代码示例，包括配置文件和核心逻辑实现，帮助开发者快速集成Vant并实现移动端适配。
2025-10-15 11:07:56
290
原创 Pinia
本文展示了如何使用Pinia状态管理库实现计数器功能。代码分为两部分：1) counter.js定义了一个名为"counter"的store，包含count、name、age等响应式状态，以及increment/decrement方法；2) test.vue组件演示了如何访问和修改store中的状态，包括使用storeToRefs保持响应性、直接调用action、通过$patch批量修改状态、订阅状态变化等。文章还展示了Pinia的特性如状态订阅($subscribe)和action生命
2025-09-12 17:05:24
661
原创 ECharts自适应
安装echarts：安装：设计稿：2640 * 1080app.vuehome.vueLineChart.vueBarChart.vuePieChart.vue
2025-09-10 16:23:05
846
原创 GitHub Pages 部署
将本地 gh-pages 分支的所有内容强制覆盖到远程的 gh-pages 分支。这对于部署分支来说是常见操作，因为部署只关心最终的文件内容，不关心历史记录。（注意：如果仓库是 git clone 得来的，这一步可以省略，因为 clone 操作会自动添加 origin。将暂存区的内容创建一个新的提交（Commit），并保存到当前分支的历史记录中。将当前工作目录下的所有更改（新建、修改的文件）添加到 Git 的暂存区。添加特定类型文件（如所有 .txt 文件）添加所有文件（包括新建和修改的文件）
2025-09-10 10:20:03
650
原创 自定义table
这段HTML代码实现了一个响应式表格组件，包含表头和可滚动表体。表格有8列，列宽采用百分比布局，其中第7列较宽(16%)，其他列均为12%宽度。表头固定显示，表体可垂直滚动。每行数据包含编辑和删除操作按钮，并采用CSS实现边框、溢出省略等样式效果。整体设计采用flex布局，确保在不同屏幕尺寸下的适应性。
2025-08-18 15:48:45
408
原创 基于element-plus和IndexedDB数据库的基础表单
本文介绍了基于Vue 3和Element Plus的表单项目配置页面实现。页面包含搜索栏、操作按钮、数据表格和分页组件，使用IndexedDB进行本地数据存储。主要功能包括：1) 通过模糊查询搜索项目；2) 分页显示项目数据；3) 添加/编辑/删除项目操作。核心代码展示了如何通过IndexedDB API实现数据查询、分页和模糊搜索，并采用响应式设计计算表格高度。技术栈包含Vue 3组合式API、Element Plus组件库和IndexedDB数据库操作。
2025-08-15 15:30:40
946
原创 基于vue.js的无缝滚动
本文介绍了两种实现无缝滚动效果的方法。第一种基于requestAnimationFrame，通过JavaScript动态计算偏移量实现垂直和水平方向的平滑滚动，支持鼠标悬停暂停功能。第二种方法基于CSS动画实现。示例代码展示了Vue组件AutoScroll的实现，包含方向控制、数据绑定、滚动速度调节等功能，并支持垂直和水平两种滚动方式。两种方法都适用于列表数据超过指定数量时自动开启无缝滚动效果，组件设计考虑了性能优化和响应式交互需求。
2025-08-14 17:12:31
4541
原创 代码生成：在 Vue 项目中，将 JSON 数据通过模板文件转换为 Vue 组件代码展示，并实时预览
本文介绍了一个使用Handlebars模板引擎将JSON数据转换为Vue组件的方案。通过定义Vue组件模板、编写JSON数据源和转换逻辑，实现动态生成Vue代码并实时预览的功能。核心步骤包括：1）安装依赖并引入美化工具；2）创建结构化Vue模板；3）准备JSON数据源；4）编写转换逻辑处理JSON和渲染组件。该方案支持动态生成包含模板、脚本和样式的完整Vue组件，并通过prettier美化输出代码，同时提供实时预览功能。注意事项包括JSON解析错误处理和模板内容提取验证。
2025-08-06 20:22:21
1045
原创 css 发射烟花的动画
这是一个基于HTML5和JavaScript实现的高质量烟花动画效果。摘要如下： 该动画模拟了真实的烟花效果，包含完整的发射轨迹、爆炸粒子和物理下落过程。主要特点包括：1) 使用ES6类封装烟花逻辑，实现面向对象设计；2) 通过requestAnimationFrame优化动画性能；3) 模拟重力、摩擦力和缓动效果实现真实物理运动；4) 提供多彩爆炸粒子、渐变消失等视觉效果；5) 支持多种交互方式，包括点击发射、自动发射和清空画面。动画适配不同屏幕尺寸，控制面板提供发射、自动发射、停止和清空按钮，搭配发光文
2025-08-05 15:24:06
824
原创 vant van-uploader组件 文件上传
本文介绍了Vant Uploader组件的文件上传配置，重点说明了常见文件类型的MIME类型设置。代码示例展示了如何限制上传文件为图片和PDF（最大10MB），同时列举了包括Word、Excel、PPT、TXT等办公文档及常见图片格式（JPEG/PNG/JPG）的MIME类型。这些MIME类型设置可用于文件上传组件的accept属性，实现精准的文件类型过滤，为开发者提供了实用的文件上传配置参考。
2025-08-05 10:05:23
416
原创 CSS 安卓应用卸载碎片化动画效果
这篇教程展示了如何创建一个安卓应用碎片化卸载动画效果。动画特点包括：将图标分解为16个碎片(4x4网格)，每个碎片有独立的爆炸动画，包含随机延迟和旋转效果。关键实现技术是使用CSS变量(--tx, --ty, --r)控制碎片运动轨迹，通过JavaScript动态生成碎片元素并设置动画参数。教程还提供了自定义选项，如修改碎片数量、运动距离、速度和形状等。完整代码实现了一个模拟手机界面的demo，点击"卸载应用"按钮即可触发碎片爆炸动画效果。
2025-08-04 19:13:08
945
原创 图片组件baseImage
本文介绍了普通页面图片组件的实现要点：需处理图片数据为空、加载中和加载失败三种状态，分别展示缺省图、加载状态和失败提示（禁用原生裂图）。图片展示需保持原始比例，在完整显示的前提下最大化呈现（使用object-fit:contain属性）。通过状态管理确保用户体验的连贯性。
2025-06-09 20:29:53
212
原创 跨标签页（页面）通信
本文介绍了三种前端页面间通信的实现方案。方案一使用localStorage本地存储，通过存储事件监听实现A页面发送、B页面接收消息；方案二未展开说明WebSocket实现；方案三采用BroadcastChannel API，通过在Vue原型上挂载共享频道实例，实现跨页面的消息发布/订阅机制。三种方案各有特点，其中BroadcastChannel方案代码简洁，更适合现代浏览器环境下的页面通信需求。
2025-06-07 09:59:18
267
原创 vue开发环境和生产环境判断
本文展示了如何通过环境变量判断当前运行环境。示例代码使用process.env.NODE_ENV检测开发环境（development）和生产环境（production），分别赋值给isDev和isProd变量。这种模式常见于Node.js应用的环境配置，帮助开发者实现不同环境下的差异化逻辑。（98字）
2025-05-27 11:41:19
246
原创 v-html 指令搜索时，搜索结果里的关键字高亮显示
这段代码是一个Vue.js模板语法，用于动态渲染HTML内容。具体来说，它通过v-html指令将item.eventType中的特定字符串searchVal高亮显示为红色。replace方法用于查找并替换searchVal，将其包裹在<span>标签中，并设置颜色为红色（RGB值为230, 32, 42）。这种技术常用于在搜索结果中突出显示匹配的关键词，提升用户体验。
2025-05-22 15:10:39
239
原创 卡片布局自适应：网格布局（display: grid；）
本文展示了两种不同的卡片布局方式，分别适用于不同的容器宽度变化需求。第一种方式是卡片宽度固定为355px，两侧间距根据容器宽度自动调整，使用grid-template-columns: repeat(auto-fill, 355px)实现。第二种方式是两侧间距固定为20px，卡片宽度根据容器宽度自动调整，使用grid-template-columns: repeat(auto-fill, minmax(356px, 1fr))实现。两种方式均通过CSS Grid布局实现，确保卡片在容器中的自适应排列。第一种
2025-05-20 15:29:50
550
原创 常见表单校验规则
该代码实现了一个表单验证组件，使用了Element UI库进行表单布局和校验。表单包含多个输入项，如用户名、身份证号、手机号码、年龄、人数、车牌号、IP地址、URL地址、邮箱和文本框等。每个输入项都设置了占位文本提示、最大字符限制、首尾去空格处理，并根据业务需求添加了必填项校验和正则校验。例如，身份证号限制为18位字符，手机号码限制为11位字符，IP地址格式为四段0~255的整数。表单通过v-model绑定数据，并通过rules对象定义校验规则，确保用户输入符合要求。
2025-05-20 13:47:43
885
原创 object-fit: contain；
object-fit: contain; 是 CSS 中用于控制替换元素（如图片、视频等）如何适应容器尺寸的属性。其核心特性包括：保持内容的原始宽高比，确保内容完整显示且不会被裁剪，当容器与内容比例不一致时自动添加留白，避免内容因拉伸而失真。通过使用 object-fit: contain;，图片等元素可以在保持比例的前提下最大化显示，适合需要完整展示内容的场景。
2025-05-20 11:16:44
732
原创 css 滚动条
本文展示了三种不同风格的网页滚动条样式设计。第一种是普通页面滚动条样式，通过CSS自定义滚动条的宽度、轨道和滑块的颜色及交互效果，使其在鼠标悬停时显示半透明黑色滑块。第二种是蔚蓝主题滚动条样式，采用蓝色调，滚动条滑块在悬停时显示半透明蓝色，点击时变为亮蓝色，轨道背景在悬停时显示浅蓝色。第三种是极光绿主题滚动条样式，适用于深色背景页面，滚动条滑块在悬停时显示半透明白色，轨道背景在悬停时显示浅灰色。这些样式通过::-webkit-scrollbar等伪元素实现，提升了页面的视觉体验和交互性。
2025-05-15 10:05:51
1319
原创 pdfh5 pdf
（2）引用时，不能使用相对路径，因为使用public文件下面的资源，是不会被webpack处理的，它们会被直接复制到最终的打包目录下面，且必须使用绝对路径来引用这些文件。写法：“/static/pdf/show.pdf"，/即表示public文件夹(需略去public)；（1）在vue项目中，读取本地的pdf文件需要放到public下static文件夹中，不能放在别的地方；// 读取本地的pdf文件需要放到public下static文件夹中。// pdfh5实例。
2025-03-25 15:56:05
500
原创 vue-cropper：图片裁剪
官方文档：https://www.npmjs.com/package/vue-cropper安装：npm install vue-cropper
2025-02-25 13:54:01
1794
原创 canvas -- map
基于canvas实现监控点位上图（增、删、改）、配置并显示监控点可视域、报警点位高亮显示、异常人员轨迹回溯以及视频查看等功能模块。
2025-02-18 10:59:15
947
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人