- 博客(45)
- 收藏
- 关注
RSS订阅原创 ECharts图表性能优化的那些事
本文系统介绍了ECharts图表性能优化的分层策略。基础优化包括选择Canvas渲染器、关闭非必要特性；数据层优化采用采样算法、分片渲染和格式优化；渲染层通过区域缩放和视觉简化提升性能；高级技术涉及Web Worker多线程和数据分割。针对不同数据量级（5k-100k+）推荐相应方案，测试显示优化后渲染时间可降低65%-80%，内存占用减少30%-40%。建议结合业务场景综合应用这些技术，在性能和体验间取得平衡。
2026-03-19 21:30:00
487
原创 Vue 组件的通信方式有哪些？
Vue组件通信方式主要包括父子组件通信和跨组件通信两大类。父子组件通过props/$emit实现数据传递，使用ref/defineExpose直接访问子组件方法。跨组件通信可采用provide/inject实现依赖注入，或使用事件总线(mitt)进行全局事件管理。对于复杂应用，推荐使用Pinia状态管理库集中管理共享状态。不同场景下建议：父子组件用props/emit，祖孙组件用provide/inject，简单跨组件用事件总线，复杂状态用Pinia。
2026-02-12 20:45:00
1174
原创 BroadcastChannel API 同源的多个标签页可以使用 BroadcastChannel 进行通讯
BroadcastChannel 是一个专门为同源浏览器上下文（如标签页、iframe、Worker）设计的通信 API。在 Vue.js 项目里，若确实存在多标签页数据实时同步的需求，它是一个非常高效和现代的选择。通过自定义 Hook 将其封装，能更好地融入 Vue 的响应式系统，管理生命周期。
2026-01-09 22:00:00
523
原创 Web Worker
Web Workers 是浏览器提供的 JavaScript API，允许在后台线程中运行脚本，从而避免阻塞主线程（UI 线程），提高Web应用的响应性能和用户体验。通过合理使用 Web Workers，可以显著提升复杂 Web 应用的性能表现，尤其是在大量计算或高频率任务处理场景中。这些实际应用展示了Web Worker在各种场景下的强大能力，特别是处理CPU密集型任务时，能显著提升Web应用性能。• 创建方式：new Worker(‘worker.js’)。• 通过端口（port）通信。
2026-01-06 19:00:00
1132
原创 vue项目pdf文件的预览
您可以在以下网址下载pdfjsLib：https://github.com/mozilla/pdf.js。pdfjsLib是一个开源项目，您可以在GitHub上找到其源代码和相关资源。5.在PdfViewer.vue组件中。4.获取pdf文件的信息并转换为链接。在index.html引入。
2023-11-10 10:16:56
1498
原创 uni-app wgt 复制等事件 不灵敏，滑动与longtap 冲突，longtap与tap冲突，文本框中粘贴的文本没有自动撑高
uni-app wgt 复制等事件 不灵敏，滑动与longtap 冲突，longtap与tap冲突。将要用的数据存入:data-text ，数据会比较准确。uni-app 文本框中粘贴的文本没有自动撑高。
2022-10-21 17:35:39
709
原创 h5 ios Safair下载文件自动添加.html导致文件乱码问题，ios不能使用接口播放视频的问题
但是在ios的Safair 下载时会被自动添加html尾缀，导致下载后是乱码的 不能使用的文件。经过后端的处理，思路大致是，不分段传输，解决了在ios视频播放的问题。这样的方式访问，在安卓 手机播放没问题，在ios手机播放不出来。在安卓手机和 ios上的uc浏览器是可以正常的 下载或者预览的。思路是前端判断是否在ios的Safair 的浏览器上。后端的处理思路大致是 响应了 有.html尾缀的接口。ios不能使用接口播放视频的问题。前端尝试了不用的下载方式的代码。然后在调用后端指定的接口。...
2022-09-01 10:21:59
1750
原创 vue+element ui el-tooltip动态禁用启用，计算文字是否超出容器
【代码】vue+element ui el-tooltip动态禁用启用，计算文字是否超出容器。
2022-08-23 11:55:48
673
2
原创 限制输入框只能输入大于0的整数
##限制输入框只能输入大于0的整数去掉input type=“number” 的内置箭头样式element ui 2.15.7的时间选择器 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop
2022-06-17 11:30:33
847
1
原创 文本域输入的内容正确的回显
用textarea 输入框 输入的内容，在输入的时候会带有换行符，此时我们想在回显这个内容到页面的时候，想要正确的显示带有换行的内容，此时需要在css加上以下代码white-space: pre-line;
2022-03-29 17:37:10
1106
原创 360浏览器注入的样式表
发现在360浏览器访问网页的时候样式被改了，点击发F12查看控制台右键360属性，查找到文件位置，复制exe文件，并重新命名未56.exe运行56.exe,打开网页，发现 没有被注入样式了
2022-03-16 14:08:16
808
5
原创 不小心在安装软件的时候，下载到了病毒的解决方式
不小心在安装软件的时候，下载到了病毒。主要症状是1.各种广告弹窗2.自行下载安装各种软件（删都来不急，删完又有新的安装）3.篡改浏览器的主页，自动跳到广告页最后的解决方案是1.安装火绒安全2.在广告弹出时，在任务管理找到该文件的位置（一般在c盘的C:\Program Files (x86)） 用火绒安全粉碎该文件3.火绒安全中设置启动项，删除可以的启动项4.查找最近安装的可疑文件，删除粉碎4.重启电脑观察是否还有以上的症状...
2022-03-11 11:08:04
4170
原创 video元素及 vue-video-player兼容iphone12及13的微信网页
1.vue-video-player，在iphone手机的微信或者其他的浏览器，打开链接后，如果你的链接是 路径+文件标识id的形式话，是识别不出来的，无法播放。2.同样的路径，在使用video元素后，在iphone12 或者13手机的微信打开链接后也是播放不出来的，但在手机的其他浏览器是可以播放的。3.链接必须使用.mp4的带有完整尾缀的文件路径的方式才能兼容iphone12及13的微信网页...
2022-02-25 17:27:05
2144
原创 vue-video-player在移动端点击视频画面不会暂停的问题
1.vue-video-player在web端的时候点击视频画面是可以正常的暂停的，但是在h5端不行2.解决办法1：在视频元素上加一层自己的蒙版，通过点击蒙版控制视频的播放与暂停，但是这个办法在视频全屏的时候会出现问题，且在视频元素渲染多个或是层级较多的时候代码会写的复杂3.解决办法2：<video-player class="video-player vjs-custom-skin" :playsinline="true" :o
2022-02-17 12:02:44
3960
2
原创 element ui自定义主题色
cnpm i node-sass@5.0.0 sass-loader@10.1.1 --save新建 element-variables.scss/* 改变主题色变量 */$--color-primary: #2CFEEF;/* 改变 icon 字体路径变量，必需 */`在这里插入代码片`$--font-path: '~element-ui/lib/theme-chalk/fonts';@import "~element-ui/packages/theme-chalk/src/index
2022-01-17 15:56:53
528
原创 javascript js 获取某个月的最后一天
//获取本月的最后一天 //获取本月的最后一天 getLastDay() { var date = new Date(); var new_month = date.getMonth() + 1; //取当前的年份 var new_year = date.getFullYear(); //取当年当月中的第一天 var new_date = new Date(new_year, new_month, 1); va
2021-12-28 10:42:11
4191
1
原创 echarts折线图区域颜色渐变效果
series: [ { label: { show: false, position: 'top', formatter: '{c}', color: '#00fff0', fontSize: this.remFontSize(0.083333) }, data: this.data2, type: 'line', lineStyle: { color:
2021-11-22 17:05:22
2161
原创 前端url参数加密的解密
1.当字符串过长时，需要用 encryptlong 来加密，否则会报参数过长的问题2.当这个加密的值运用在url的参数加密中，如果url是另一个项目的话，会出现解密后值为空的现象3.此时需要在加密后 再次用url加密具体如下加密let query = { id:this.morningId, type:1, ids:ids.join(',') } this.h5Url2 = `${process.env.VUE_APP_H5_BASE_HTTP}/shareId
2021-09-30 13:55:07
5100
原创 css文本多行换行两端对齐
css文本多行换行两端对齐，且最后一行左对齐text-align: justify!important; text-align-last: left!important;
2021-09-23 15:51:01
1120
原创 js去掉字符串中的html标签和特殊字符
//去除html标签 delHtmlTag(str) { let a = str; var converter = document.createElement('DIV'); converter.innerHTML = a; var b = converter.innerText; converter = null; var c = b.replace(/[&\|\\\*^%$#@\-]/g, ''); return c; }
2021-09-23 11:56:53
540
原创 vue-seamless-scroll的列表点击事件异常的问题处理
在应用vue-seamless-scroll显示列表的滚动效果的时候，会有列表中的数据可以点击的需求，但是直接在li元素上注册click事件并不会全部生效，此时的解决方案如下<div @click="clickProps2($event)"> <vue-seamless-scroll :data="toDoList2" :class-option="optionKeyword"> <ul > <li v-for="(item, index) in t
2021-09-16 14:35:37
458
原创 移动端的播放器兼容小众的安卓系统
背景是这样的，需要在一个比较小众的移动一体机大屏上展示一个网页数据可视化大屏，这个大屏的项目除了一些 图表，还需要跳转到另一个页面 播放视频 在视频上操作一些自定义的事件逻辑。刚开始使用了vue-video-player，vue-aliplayer-v2 在播放时候。视频都无法正常解码或者播放，之后使用了flv.js，可以正常播放了，但是还是偶发不能播放。排查了网速后，发现网速正常。最后应用了cyberplayer.js 才解决这个兼容问题<div id="dvplay"></di
2021-09-13 11:09:22
384
原创 vue-quill-editor富文本编辑器上传图片优化
vue-quill-editor富文本编辑器本身自带点击图片上传的功能，但是上传后的图片是以base64的形式存储在数据库，这会造成数据库存储的过大，进而导致在查这个字段的数据的时候运行缓慢，在前端回显该数据，发起的请求的时候，请求的响应时间较长，用户体验不友好。 解决的方案有两种，一种是后端处理成 图片存储在服务端，然后以；链接的形式返回。但是在提交富文本时也会出现提交请求返回缓慢的问题。一种是由前端处理。尝试过quill-image-extend-module，但是这个组件不够完善，在插入图片时会出现
2021-09-13 10:14:33
899
2
原创 vue项目用安装了less less-loader运行报错
vue项目用安装了less less-loader运行报错npm i less less-loader -D控制台报错：this.getOptions is not a functionthis.getOptions is not a function 原因是由于less-loader版本太高了需要卸载原来的less-loader，在安装个版本低的npm install less-loader@5.0.0 -D...
2021-08-12 17:01:03
321
原创 富文本编辑器 保留空格
使用的是vue-quill-editor插件的编辑器在文字前使用tab和空格键 编辑后，显示在页面的预览效果是有空格的在次进入编辑后，之前编辑的空格不见了使用ql-editor后 虽然可以正常的显示空格，但是整个样式发生了变化 <quill-editor class="ql-editor" v-model="ruleForm.content" ref="myQuillEditor" :options="editorOption" @blur="on.
2021-08-11 09:57:21
2349
原创 公众号网页开发nginx本地代码运行调试
server {listen 80;server_name report.hnroger.com; location / { proxy_pass http://127.0.0.1:8081; }}
2021-08-06 17:59:57
345
原创 postcss-px-to-viewport配置landscape: true后运行报错处理
需要在package.json 配置"postcss":"7.0.32", 注意版本重新cnpm i "devDependencies": { "postcss":"7.0.32", "postcss-px-to-viewport": "^1.1.1" }, "resolutions":{ "postcss": "7.0.32" },
2021-04-21 13:23:03
924
原创 element ui table表格的底部和右侧的细线条去掉
/deep/.el-table { // width: 100%; box-sizing: border-box; &::before{ height: 0px; } } .el-table--border::after, .el-table--group::after{ width: 0px; height: 0px; } ```
2021-04-16 15:06:17
1896
原创 postcss-px2rem中设置单独的px不转换成rem
#className { font-size: 24px;/*no*/ //用/*no*/标识符可以这行代码不用这个插件}
2021-04-15 13:15:30
3259
转载 前端动画实现的几种方式
1.javascript直接实现；通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果，16毫秒javascript 实现动画通常会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。2.SVG（可伸缩矢量图形）；: 用于控制动画延时：对属性的连续改变进行控制：颜色变化，但用就能控制：控制如缩放、旋转等几何变化：控制SVG内元素的移动路径<body>14 <s
2021-01-11 14:13:49
1154
原创 ‘webpack-dev-server‘ 不是内部或外部命令，也不是可运行的程序
‘webpack-dev-server’ 不是内部或外部命令，也不是可运行的程序把node_modules 文件删掉、然后在 npm i注意是 npm 不是 cnpm静静的等待 。。。然后再 运行 npm run dev然后就ok了
2021-01-07 09:45:40
178
原创 svg转geojson echarts地图geo 适用
svg转geojson源码地址https://gitee.com/yuhonyon/svg2geojson先拉取该代码cnpm i安装环境该程序需要使用 “gulp”: “^3.9.1”,nodejs 环境需要使用 10.20.1 版本4.在该项目 路径下 命令行 输入 gulp 即可ps:注意svg的格式 需要与 文件中的示例一致在转之前 需要把 svg 旋转180度...
2021-01-05 15:09:44
3368
原创 卸载安装nodejs版本
1.卸载原有的node2.安装D:\Downloads3.实验是否安装到位 node -vnpm -v4.安装的路径D:\Program Files\nodejs5.输入指令npm config set prefix “D:\Program Files\nodejs\node_global”npm config set cache “D:\Program Files\nodejs\node_cache”6.安装cnpm 淘宝镜像npm install -g cnpm --r
2021-01-05 10:33:46
2391
转载 关于vue项目 在不同环境的变量配置
转载链接：https://blog.csdn.net/linbenjian/article/details/85261201原文链接： https://blog.csdn.net/linbenjian/article/details/85261201使用vue-cli3打包项目，通过配置不同的指令给项目设置不一样的配置。npm run serve时会把process.env.NODE_ENV设置为‘development’；npm run build 时会把process.env.NODE_ENV设
2020-12-29 11:08:04
522
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人