- 博客(38)
- 收藏
- 关注
RSS订阅
原创 vue项目webpack打包优化体积优化，打包体积减少200kb到4Mb
1.压缩图片应尽可能地压缩项目中的图片，或使用svg矢量图、雪碧图、webp图片（此种图片仅兼容谷歌和opera浏览器，但图片的体积更小）等小体积的图片，达到减少打包体积的目的。2.路由懒加载可以在路由配置里，使用require引入页面或组件实现路由懒加载，每个页面大约可以减少10—50kb的打包体积，示例如下：3.移除源代码，替换压缩后的源码修改vue.config.js配置文件，提取公共方法或资源，打包时删除源代码，减少打包后的体积；在html使用外部链接引入相关源代码，按此方法修改，vue大
2022-02-20 21:15:52
9454
原创 解决定时器导致页面卡顿、卡死的问题
在项目中有时需要使用定时器，去不断刷新数据重载部分页面，长时间使用会导致线程占用和内存泄漏，导致页面卡顿、卡死的现象。网上查找过不少资料，无法根本解决此问题，下面介绍本人实践过的有效方法：var timerQ = null //首先可以全局定义一个定时器//清理定时器的公用方法clearTimerQ(){ try { window.clearInterval(timerQ) } catch (error) {} window.timerQ = null},//发送交易获
2021-06-06 16:13:08
14202
6
原创 图片无法显示 base64图片无法显示 图片体积过大无法显示
图片体积过大在vue项目中，经常使用webpack或其他打包工具，但因打包工具对图片的引入经常有大小限制，所以导致图片无法加载，一般来说，图片超过20kb就容易无法显示，此时应使用require引入方法显示图片如果是背景图图片，可以直接使用style添加背景图片实现<div class="nav" :style="'background-image: url(' + bgl + ');'"></div>export default { data() { retu
2021-06-06 15:50:33
8323
原创 JSON报错JSON转换失败JSON转译失败（快速解决方法，附详细注释）
解决JSON转译报错 本地缓存自定义过期时间由于localStorage暂未定义过期时间，需要自定义过期时间，实现原理非常简单：在存储数据的同时，记录下当时的时间戳，在读取数据时，读取当前时间戳进行对比即可。JSON转译失败处理var str=""try{ str=JSON.stringify({data:value,time:curTime})//使用try catch方法，防止因JSON转译失败引起的报错，失败后会自动进入catch，可自定义处理失败结果 }catch (e){
2020-06-28 12:47:24
9601
1
原创 vue项目同时使用sass和less
有时因为代码需要，需要同时使用sass和less，现将本人的一点经验心得分享给大家。1.首先建议安装淘宝镜像，如已安装可跳过命令：npm install -g cnpm --registry=https://registry.npm.taobao.org2.如项目中已有sass，需要安装less，执行如下代码：cnpm install less --savecnpm install less-loader@4.1.0 --save注意：2020年以后安装的less版本均为6.0以上，安装后可能会
2020-06-10 12:37:25
7594
1
原创 高德地图初始化、点击定位的方法使用（附相关注释）
大家好，这次使用的是高德地图api的使用，主要讲述了高德地图初始化、点击定位后添加circleMarker的使用方法。
2025-03-10 19:52:36
1034
原创 数字动画插件countUp.js的问题总结，每个组件唯一的uid值作为动画插件的id渲染
大家好，下面分享一下本人使用countUp.js动画插件遇到的问题。因为数字累加器countUp是根据id来渲染的，需要保证每个组件的id值都不一样，所以使用了唯一_uid值来区分每个组件。
2025-02-12 10:34:25
1171
原创 解决elementUI table表格的渲染位置错乱，相邻表头正常，但数据错乱或排序错误等问题，解决表格提示语无法复制的问题
使用自定义排序方法 :sort-method=“(a,b)=>{return a.percentage - b.percentage}” sortable。查询elementUI官方文档发现，列表排序会使用elementUI默认的排序，可能与开发者想要的效果不一致。
2024-07-12 16:16:13
1704
原创 获取当前页面的字体大小，可换算成rem
该方法是window的方法，可以直接使用，主要用来获取元素当前的样式信息，可直接获取后转换成页面的rem，并在图表或其他地方使用。
2023-06-15 16:07:25
1546
原创 处理img标签url路径错误，图片空白或一闪一闪的问题
如果不加.once，img会一直循环加载图片（出现空白或一直在闪烁），在error事件后加上.once，即只触发一次，可使用自定义图片显示。开发项目时经常遇到img标签图片的url打不开的情况，导致标签一直空白或一闪一闪的问题，不必焦虑，教你一招轻松解决以上问题！
2023-04-01 18:55:30
3018
原创 微应用乾坤框架，整合多种项目真香（持续更新）
loadMicroApp 手动加载子应用 也类似于 React.js 的 render 函数和 Vue.js 的 new Vue()，只不过更自由了。3.增量升级：在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略。start 启动主应用 类似于 React.js 的 render 函数和 Vue.js 的 new Vue()4.独立的运行时：每个微应用之间状态隔离，运行时状态不共享。
2023-01-31 20:30:00
2358
原创 echart图表 和弦关系图 悲惨世界人物关系图的使用及配置项 修改旋转角度 顺时针旋转
写好配置项后即可看到效果，因数据量大仅提供部分测试数据演示，最终的效果和echart官网类似。使用echart图表时，偶尔会遇到使用和弦关系图的问题，这里举例和弦关系图的配置。
2023-01-29 14:31:40
2658
原创 处理多层级表单的提交，每个表单单独校验并收集表单数据
相信大家偶尔会遇到多层表单的情况，有时需要点击最外层的提交按钮，将每个tab栏下的表单全部校验并提交数据。这里抛砖引玉，简单介绍一下3层的表单处理思路，希望对你有所帮助。
2023-01-18 10:37:07
1759
原创 解决请求数据量过大，分批多次请求的问题
相信大家偶尔会遇到某个请求数据量过大，需要分批多次请求的问题，这里举例按小时分批多次请求：最后，原创不易，如本文对您有所帮助，麻烦点赞收藏一下谢谢！
2023-01-08 17:11:43
3492
原创 openlayer自定义悬浮框overlay及其跨地图边界显示不全的解决方案
openlayer自定义悬浮框overlay及其跨地图边界显示不全的解决方案
2022-07-03 22:09:55
2677
原创 vscode绿色、护眼色，vue自动格式化配置参考
{ "settings": { "workbench.colorTheme": "Atom One Light", "workbench.colorCustomizations": { "[Atom One Light]": { "editor.background": "#C7EDCC", "sideBar.background": "#C7EDCC", "activityBar.background": "#C7EDCC",
2022-05-10 22:17:04
6257
1
原创 vscode编辑器搜索小技巧
`vscode`是大家常用的编辑器，这里分享一些常用的搜索技巧，希望可以帮助大家加速代码查找和开发进度。一. 搜索目录下的指定文件如果想要搜索某个文件目录下的指定文件，该如何配置呢？例如想搜索H5项目下所有目录的vue文件，查找pageId这个字段如果想同时搜索所有目录下的vue和js文件，那么可以将files to include改成./H5/**/*.vue,./H5/**/*.js，双*号代表多层目录，单个*号代表一层目录，选择的文件类型用,分隔。当然，vscode搜索非常强大，还...
2021-11-23 16:20:44
6276
原创 仿蚂蚁金服AntV框架蚂蚁数据可视化F2 基金折线图、对比图（包含买卖点、自定义标签等，注释详尽）
大家好，这次使用的是AntV的蚂蚁数据可视化F2框架，类似于蚂蚁基金的效果,包含买卖点、自定义标签等，代码如下：F2框架参考网址：https://antv-f2.gitee.io/zh/examples/line/multiple#customize-tootlip可以进入该网址，直接复制下方代码进行调试或观察。<canvas id="container"></canvas>import F2 from '@antv/f2';const data = [{ dat
2021-07-15 14:52:36
3131
1
原创 仿蚂蚁金服AntV框架蚂蚁数据可视化F2饼图（注释详尽）
大家好，这次使用的是AntV的蚂蚁数据可视化F2框架，类似于蚂蚁基金的效果，代码如下：F2框架参考网址：https://antv-f2.gitee.io/zh/examples/pie/donut#basic<canvas id="pieCanvas"></canvas>import F2 from '/utils/f2';const data = [{ name: '类型1', percent: 59.12, a: '1'}, { name: '类型2
2021-07-14 11:22:28
3232
1
原创 仿蚂蚁金服AntV框架蚂蚁数据可视化F2条形图、柱状图（注释详尽）
大家好，这次使用的是AntV的蚂蚁数据可视化F2框架，类似于蚂蚁基金的效果，代码如下：F2框架参考网址：https://antv-f2.gitee.io/zh<canvas id="barCanvas"></canvas>import F2 from '@antv/f2';const data = [{ year: '1951 年', sales: 38}, { year: '1952 年', sales: 52}, { year: '1956 年
2021-07-12 15:38:11
3926
1
原创 vue源码深入分析，步骤分层次解读，vue点击事件详解
大家好，在网上看到过很多vue源码的解析，大多是copy和摘抄的，少有自己的理解，所以下决心花时间整理一遍自己对vue源码的理解。我只是一个普普通通的码农，如果本文有写的不对之处，希望各路大神指正，谢谢！vue版本：2.5.17源代码相关链接：https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.js首先，本人采取的是最简单的debugger调试方法，按照步骤与逻辑分层次解析vue源码，我认为这是最快、最简单、也是最有效的方法。本文使用的vue调试代码如下：
2021-01-07 16:53:28
2707
2
原创 vue源码深入分析，步骤分层次解读，vue初始化render篇（包含vue双向绑定原理和新旧节点对比）
大家好，在网上看到过很多vue源码的解析，大多是copy和摘抄的，少有自己的理解，所以下决心花时间整理一遍自己对vue源码的理解。我只是一个普普通通的码农，如果本文有写的不对之处，希望各路大神指正，谢谢！vue版本：2.5.17源代码相关链接：https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.js首先，本人采取的是最简单的debugger调试方法，按照步骤与逻辑分层次解析vue源码，我认为这是最快、最简单、也是最有效的方法。本文使用的vue调试代码如下：
2020-12-27 11:46:57
2488
2
原创 vue源码深入分析，步骤分层次解读，vue初始化（一）
大家好，在网上看到过很多vue源码的解析，大多是copy和摘抄的，少有自己的理解，所以下决心花时间整理一遍自己对vue源码的理解。我只是一个普普通通的码农，如果本文有写的不对之处，希望各路大神指正，谢谢！vue版本：2.5.17源代码相关链接：https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.js首先，本文使用的vue调试代码如下：<div id="main"> <h1>count: {{times}}</h1>
2020-12-20 16:50:44
2429
原创 仿蚂蚁基金效果AntV的蚂蚁数据可视化F2折线图、买卖点和自定义标签（注释详尽）
<canvas id="lineCanvas"></canvas>var chart = chart1 = new F2.Chart({ id: 'lineCanvas', pixelRatio: window.devicePixelRatio});var finData = [{ "date": "2010-01-10", "type": "能源", "value": 99.9 }, { "date": "2010-01-10", "type": "金属", "va
2020-11-06 12:58:33
3458
1
转载 最详尽的 JS 原型、js原型链终极详解（第三篇）
七. 函数对象 （复习一下前面的知识点）所有函数对象的proto都指向Function.prototype，它是一个空函数（Empty function）Number.__proto__ === Function.prototype // trueNumber.constructor == Function //trueBoolean.__proto__ === Function.prototype // trueBoolean.constructor == Function //true
2020-11-06 12:48:10
2312
转载 最详尽的 JS 原型、js原型链终极详解（第二篇）
四. protoJS 在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做__proto__ 的内置属性，用于指向创建它的构造函数的原型对象。对象 person1 有一个 __proto__属性，创建它的构造函数是 Person，构造函数的原型对象是 Person.prototype ，所以：person1.__proto__ == Person.prototype请看下图：根据上面这个连接图，我们能得到：Person.prototype.constructor == Person;
2020-11-03 15:08:40
2265
转载 最详尽的 JS 原型、js原型链终极详解（第一篇）
一. 普通对象与函数对象JavaScript 中，万物皆对象！但对象也是有区别的。分为**普通对象和函数对象，**Object 、Function 是 JS 自带的函数对象。下面举例说明var o1 = {}; var o2 =new Object();var o3 = new f1();function f1(){}; var f2 = function(){};var f3 = new Function('str','console.log(str)');console.log(ty
2020-11-02 16:38:26
2377
1
原创 百分比转译方法（包含特殊处理、报错处理）
/** * 百分比转译方法，默认保留小数点后两位 * @author xxx * @param d 传入的字符串或数字 * @param s 返回的数字最后添加的字符，默认"%" * @param num 返回的数字默认保留几位小数 */const newPercent = function (d, s = "%", num = 2) { if (window.isNaN(Math.round(d))) {//数据为NaN(特殊情况) return "--"
2020-09-13 17:29:57
2444
原创 金额转换成大写和简称的方法
/** * 获取金额的中文大写或简称的方法 * @author xxx * @param money 传入的金额字符串 * @param simple 为true代表金额简称，false为繁体字大写，默认为false */const getMoneyUpper = function (money, simple = false) { if (!(Object.prototype.toString.call(money) == '[object Number]' || Ob
2020-09-13 17:28:17
2485
1
原创 echarts饼图实例（带注释，超详细）解决formatter无法处理数据的问题 解决图标自适应大小的问题
大家在使用echarts饼图时，经常遇到formatter无法处理精确数据的情况，怎么办呢？建议在外面自定义或处理好数据pieData，然后在formatter里面使用for循环遍历//首先建议在外面自定义或处理好数据pieData，然后在formatter里面使用for循环遍历 var chartPie = echarts.init(document.getElementById("charPie")); var option = { backgroundColor: "#ffffff"
2020-09-13 17:20:39
4641
1
原创 less和sass 自动计算宽高属性，盒子垂直居中方法，样式覆盖（权重）关键字important
大家好，给大家推荐一个less和sass中非常好用的属性，可以自动计算宽高，代码如下：（以less为例）下面展示一些 内联代码片。@w200:200/75rem;.product-name{ width: calc(100% - @w200); font-size: 28/75rem; position: absolute; left: 0; top: 50%; transform: translate(0,-50%); color:red!im
2020-09-13 16:56:07
4934
1
原创 tab切换echarts图表引发的问题 显示不全或错乱显示 在其他tab显示
在项目中曾遇到过这样的问题：多个tab切换echarts图表引发的问题，显示不全或在另一个tab内显示，网上很多说用v-if，试验了多次均无效果，后来使用setTimeout延时就可以了。mainTab(id) { if (id === "1") {//第1个tab栏 setTimeout(() => { this.echartsPie()//饼图 },500) }else if (id === "2") {//第2个tab栏 se
2020-07-02 15:52:05
3696
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人