- 博客(17)
- 收藏
- 关注
RSS订阅原创 【前端】vue项目引入高德地图JsAPI定位，实现移动端打卡功能
本文介绍了如何利用高德地图API实现移动端地理位置打卡功能。首先需要在高德开放平台申请应用并获取密钥，然后安装高德地图JS API依赖。接着初始化地图组件，设置默认中心点和打卡范围标记，通过关键字搜索功能实现位置定位。最后通过移动端获取用户位置信息，判断是否在设定的打卡范围内完成打卡操作。文章提供了详细代码示例和效果图，包括地图初始化、标记点设置、范围圈绘制以及搜索功能实现等关键步骤，帮助开发者快速集成位置打卡功能。
2025-09-12 11:37:32
257
原创 【CSS】设置border-image渐变，border-radius不生效
CSS边框渐变与圆角冲突的解决方案 当同时使用border-image渐变和border-radius时，圆角会失效。这是因为border-image会替换标准边框绘制方式，而浏览器默认不支持对图像边框应用圆角裁剪。 解决方法是通过伪元素模拟渐变边框： 主元素设置border-radius和overflow:hidden 用::before伪元素创建绝对定位的渐变层，尺寸略大于主元素 对伪元素应用相同的圆角（需加上边框宽度补偿） 使用z-index:-1将伪元素置于底层 这种方案既能保持圆角效果，又能实现渐
2025-08-14 15:55:25
356
原创 富文本选中区域高亮，点击其他区域操作，选中区域需要保持高亮
在富文本编辑中实现选区高亮并保持的解决方案是使用iframe嵌套。由于浏览器限制，同一页面只能存在一个选区，但通过将富文本编辑器放入iframe，可以实现内外选区共存。技术实现上，父页面与iframe通过EventBus（基于Vue的事件总线）进行通信，包括事件监听和触发。该方法适用于富文本编辑器、文档对比等需要多选区操作场景，解决了跨元素高亮和光标聚焦问题。
2025-08-14 15:27:39
457
原创 vue项目富文本编辑器WangEditor添加自定义组件（悬浮提示框）
本文介绍了在Vue3项目中使用WangEditor富文本编辑器实现自定义元素悬浮提示功能的方法。通过自定义节点渲染，利用snabbdom的h函数添加鼠标悬浮事件，结合lodash的debounce和throttle优化事件处理。文章详细说明了如何注册自定义元素、绑定事件以及计算弹窗位置，同时指出了当前方案存在的闪烁问题和优化空间。实现效果包括鼠标悬浮显示关联提示框，离开时隐藏，为富文本编辑提供了交互增强功能。
2025-08-05 16:33:45
299
原创 vue3使用富文本编辑器WangEditor自定义元素设置样式（二）
vue3项目使用富文本编辑器WangEditor自定义新元素设置样式，记录针对自定义元素一些操作
2025-07-28 15:02:48
407
原创 vue3项目使用富文本编辑器WangEditor自定义新元素设置样式
本文介绍了如何在WangEditor富文本编辑器中实现自定义样式插入功能。通过定义节点数据结构、创建插件、配置渲染逻辑和HTML转换规则，实现了将带有特定class和属性的span元素插入编辑器并正确解析。主要步骤包括：1)定义mention类型节点数据结构；2)开发withMention插件重写关键方法；3)使用snabbdom渲染自定义元素；4)配置HTML转换逻辑确保双向解析。最终实现了在编辑器中插入并保留自定义样式的功能，满足项目对富文本编辑的特殊需求。
2025-07-28 11:23:10
978
原创 完美解决html2canvas样式丢失！用modern-screenshot实现高清网页截图导出Word
文章摘要：本文分享了解决前端开发中网页元素转图片及导出Word的痛点问题。针对html2canvas存在的样式丢失问题，作者尝试强制指定CSS属性无果后，转而推荐modern-screenshot插件。详细介绍了该插件的安装方法、API引入方式，并展示domToPng函数的使用示例（包含scale和quality参数配置）。最终完美解决了截图样式问题，为开发者提供了更优的解决方案。
2025-05-29 11:52:28
706
原创 Vue实现网页内容转换为Word文档导出引用jquery.word.export.js插件
前端Vue实现网页内容转换为Word文档导出引用jquery.word.export.js
2025-05-21 18:50:33
898
原创 【前端】页面iframe嵌入显示微信公众号文章
使用iframe标签嵌入微信公众号文章详情，提示拒绝连接请求，无法正常展示内容。可以通过nginx代理配置处理跨域问题。
2025-03-04 11:39:17
2076
1
原创 Chrome禁用浏览器 CORS 检查
页面调接口报Access to fetch at 'http://xxx/xxx' from origin 'http://127.0.0.1:8848' has been blocked by CORS policy: Response to preflight request doesn't pass access control check
2025-02-26 11:08:48
891
原创 日历插件FullCalendar引入（VUE项目）
vue项目引用日历组件fullcalendar，实现日历月份、周切换展示日程，鼠标悬浮显示日程的具体信息。
2025-02-19 15:03:02
2651
3
原创 动态设置css样式
CSS中动态设置–fill-color（自定义属性，也称为CSS变量）这种方法适用于需要在用户交互或基于某些条件动态改变样式的场景。
2025-02-18 10:03:48
482
原创 解决绝对定位元素不能覆盖其父元素同级的绝对定位元素问题
鼠标悬浮显示具体内容，存在不能覆盖其父元素同级的绝对定位元素的问题，父级设置的z-index层级都是相同的。
2023-04-19 17:21:09
939
1
原创 【uni-app】处理uni-app编译APP-PLUS window.addEventListener(‘message‘）不能使用问题
处理uni-app编译APP-PLUS 无法使用监听事件问题window.addEventListener('message'）
2023-02-02 19:59:07
8568
1
原创 Vue 打包过程记录
1.仅需要打包发送在终端运行命令 npm run build，项目会生成dist这个文件夹。把这个生产文件夹发送给后端遇到的问题网址访问会显示空白或者404需要在vue.config.js 配置文件中将基本路径‘ / ’改为‘ ./ '，重新打包module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/'}2.要求在访问路径添加项目名根据网上搜索的需要在vue.config
2021-04-21 22:58:28
445
原创 Python简单数据可视化
Python简单数据可视化运用pyecharts对Excel中的数据进行分析处理：环境系统：windows10python版本：python3.7.1使用的库：matplotlib，numpy，pyechartspyecharts Timeline 环形图 的使用对于数据处理，那么时间这一性质就是最好的反馈如图所示: 部分代码： pie_1 = Pie('16年...
2019-12-15 18:20:51
378
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人