- 博客(42)
- 资源 (1)
- 问答 (9)
- 收藏
- 关注
RSS订阅原创 多重联级递归表单制作
一、项目背景需要一个提交表单，内容经常增减变动。于是设计一套后端提供配置， 前端自动生成的一个组件。前后端都比较方便，前端不需要频繁变动，后端也只需配置即可。联动需求：后续加上联动需求举例： xx 省 xxx市 xxx区联级数据，三个下拉，需要获取得到前一个值才能渲染后面的下拉框。二、思路初始设计一套，for循环完事了。后续需要联级，没办法只能想到递归，使用组件调用自己的方式。A组件中不断去调用A组件，将需要递归的一层传进去再次渲染三、问题遇到问题有几个1、数据绑定问
2022-04-19 17:33:41
338
原创 深圳抗疫支援火眼【前端取样】
从前端开发到前端取样，好像都差不多，其实区别可大了，哈哈哈哈。公司广招志愿者前去支援深圳0107疫情的前端取样，我没做过，没有经验，但是我有热情啊，说干就干，简单的培训后，直接上战场。下午5点半左右到场，穿上二级防护服，准备收第一批核酸样本。到现场看到茫茫的做核酸的人员，打电话给负责人，然后看到桌上有两大包核酸样本。开整！第一步，清点管数，一般一包是50管，500人份。但是有些会少几人，可能498人份，但是这些医生会记录。我们在登记本本就好了，记好数，放入装有冰袋的泡沫盒子中，保存好。具体流
2022-01-13 15:07:32
116
原创 echarts生成误差棒图
首先声明，这个图是从这个哥们这里弄来的。自己再加以修改的。以更加贴合我自己的代码需求echarts 自定义误差图_贵林之恋的博客-优快云博客_echarts 误差棒<script>$(function() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var categoryData = []; //X轴数据...
2021-12-29 16:49:04
1516
2
原创 vue-echarts踩坑记录20210913
项目使用vue-echarts插件用于可视化，这个插件相比于原生的echarts好处就在于能自使用，写起来比较方便引入后可直接使用标签，详情去看git说明。于是项目上踩坑了。场景：一个页面上多个图表，准确来说是多个直方图。当我给一个直方图设置柱体颜色和图例的时候，这一个直方图开始影响他之前的一个直方图。怎么弄都不好使。我于是改用了原生的echart。问题解决。问题所在：事后，我重新找原因的时候，发现是v-if和v-show导致的问题，我把页面置为v-show没有出现影响，v-if的时候就会
2021-09-13 10:49:54
328
原创 关于...扩展运算符的深拷贝
深拷贝，把对象地址指向独立出来，重新分配内存地址。平时开发中也经常用到。先讨论下扩展运算符，这个东西最开始我不知道在哪里听说他是浅拷贝，一直没去验证，就记在心里。后面别一个学习伙伴推翻，说扩展运算符是深拷贝。后面一试，发现还真是，又觉得是深拷贝。今天开发正好遇到这个问题了。研究了一下，得出结论：扩展运算符既不是深拷贝，也不是浅拷贝。一半一半，他只能深拷贝第一层。第二层的拷贝还是浅拷贝他只能拷贝第一层。所以，还是老实用递归写深拷贝把。JSON的深拷贝就不说了，不好用哈，局限性太大了。附上.
2021-08-24 17:18:40
3498
4
原创 前端大数据+echart 基础解决方案
一、大数据处理递归函数分多次获取数据，并且必须保证接口同步调用。const getStep = 50000;async recursionGET(start:number,end:number){ let readStart = start let readEnd = end if(readStart + this.getStep < readEnd){ await this.getSignals(readStart,r
2021-08-19 17:01:58
564
原创 echart+大数据处理一些设置（持续更新）
第一次接触大数据，用的echart。之前的echart都是画简单的饼图，数据量没那么大。这次的把大数据处理的一些办法，设置写一下。第一个接触的是折线图，先上一个配置<v-chart ref="detailChart" :option="detail" :manual-update="true" :autoresize="true" class="echarts-mini"
2021-08-10 16:46:54
1582
原创 纯css变换图片颜色png
众所周知，只有svg格式图片能改变颜色，png是不能改变的。最近也遇到这种问题了。开始解决办法就是找设计师要么再切一张图要么就搞个SVG给我。但是这都是求人搞，有没有办法自己就把换肤搞定。这个时候就用到了一个css3的一个新属性filter:drop-shadow具体怎么使用不说了，直接上代码看效果.icon-box{ width: 16px; height: 18px; overflow: hidden; z-index: 1;}.red-img{ d
2021-03-09 16:32:48
279
原创 对象数组根据对象的某个值进行去重操作，求和相同对象的个数
需求不同时间断产生的数据不同，个数也不相同，我们需要统计一个时间段的个体，并统计这些个体出现的次数。数据如下：let data=[{name:"cxy",total:2,time:"2021-02-01"},{name:"cxy",total:3,time:"2021-02-02"},{name:"pp",total:2,time:"2021-02-01"},{name:"lhx",total:2,time:"2021-02-01"},{name:"lhx",total:2,time:"2021-0
2021-02-14 17:13:56
566
原创 Echart饼图添加轮播效果
Echart饼图轮播效果关键代码如下，传入饼图数据的长度，以及饼图echart对象即可完成饼图的轮播，代码如下：/** * * @param pieDataLength 饼图数据长度 * @param ec 饼图echart对象 * @param time 轮播时间 */export function pipeAnimation(pieDataLength: number, ec: any,time:number) { let timer = null; if (pieDat
2021-01-26 11:01:09
991
原创 HTML文件、图片、pdf上传预览
一、选择文件上传上传文件的关键在input标签，以及获取文件并发送<!--ng版本--><input hidden type="file" multiple="multiple" (change)="fileChange($event)" ><!--原生版本 用js监听change事件就好了--><input hidden type="file" multiple="multiple">使用hidden属性将input标签隐藏，这样便于我们
2020-07-08 14:57:52
1924
原创 跑马灯组件---基于angular6+
跑马灯，非常常用的功能，用于消息通知之类的。百度一搜都是使用<marquee>来完成。结果发现W3C上根本没有这个标签。原来是这个标签即将被删除。在前端不断革新的今天，怎么能用将废弃的标签呢。指不定哪天就没了，程序出了莫名的bug都不知道。所以我决定自己写一个跑马灯。单独的css3动画完全可以实现一个跑马灯效果，但是，css写死了，那怎么组件化，让人人都可以用呢。所以想到使用js控制。第一个想到的就是定时器。通过定时器+transform：translateX()去减少px的值。只需要将定时
2020-06-22 14:30:00
1305
2
原创 一个简单的带复选框的树形图
<body> <ul> <li class="li" > <label><input type="checkbox" checked="true" class="check-father" /><span id=""> adadadadsa </span></label> <ul class="child"> <li> .
2020-06-15 15:16:14
698
原创 最近工作的一点收获
一、解决ng切换路由不刷新页面问题。遇到这个问题，第一想到的就是vue的keep-alive，说实话还是vue香。ng默认都会缓存路由，这就导致路由切换不刷新。带来的问题就是，比如我看了第一篇文字，往下滚动了，返回主页面，再进入这篇文章结果还在滚动位置，数据也不会刷新。这明显有问题的。需求是需要刷新这个组件。解决办法：只需要每次进入的路由不一致就可以使得组件刷新。最简单的方法就是在路由后面加上newDate(),你永远无法踏入同一条河流。这样路由永远都不会相同。www.baidu.com?ref='
2020-05-28 16:10:33
168
原创 echart渐变折线图
效果图，以及代码。关键点在于渐变，后面代码中有注释说明。上下左右四个渐变方向，加上渐变的色彩偏移，既可以完成带渐变的折线图。需要与后端对接，只要改变X轴Y轴的数据，还有一些小的细节就可以了。比较简单实用。let option={ color:'#38d7b7', tooltip: { trigger: 'axis', ax...
2020-05-06 11:34:13
1358
原创 ng 集成 ngx-echarts
这个其实网上有很多教程，但是我还是看那些教程看了很久都没有看明白。ngx-echarts确实很好用哈。想复用一个div来渲染不同的数据。<div echarts class="echartsBox" [options]="chartOption1"></div>开始呢就这样绑定一个对象就搞定了，至于对象里面有什么，随便复制一个echart-demo就可以看到效...
2020-04-27 16:47:15
1146
原创 带进度条的Tree
问题来由工作上业务有个需求，树状图展示数据。这个好办，很多组件，插件都有数状图。比如Ant组件。但是想在tree的文字后面再做扩展却是很难。可以说基本办不到。类似于这种树状图。ant基本已经写死了。那么办法只能自己整了。自己手写的效果：上代码这个就不多说了，用li画就可以了，由于我这里规定好了只有三级目录，所以直接写死了。如果不确定有几级的话再想其他办法，用递归也可以的。<u...
2020-04-26 14:26:14
440
原创 自创提升流程开发效率小工具，只针对当前工作业务有效（2019-12-17）
最近在做一个流程项目，就比如企业里面一个人要申请个VPN啥的。流程不难，但是费力！最开始是这样的这个样子呢，看起来还挺顺眼的，有内味了。有多少新增多少。然后一键生成，多舒服啊。可是有一次我开发一个流程。他喵的这个流程字段主表加子表一共有上百个字段，我的妈呀，我要点一百多次的新增。不仅如此，还要复制200多遍。这样下来还不如自己复制得了。懒则生变。为了让他更智能。 ...
2019-12-17 18:29:38
309
原创 js继承方式照个网上例子加自我总结
话不多说，直接上代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script> //父类 function ...
2019-12-17 17:56:11
211
原创 VUE学习（二）
1.轮播图https://github.com/surmon-china/vue-awesome-swiper使用swiper的轮播图插件，非常好用。swiperOption:{pagination:'.swiper-pagination', //下面的点点点loop:true, //循环...
2019-11-01 10:34:20
111
原创 VUE学习（一）
一、初始化项目及准备工作1.新建一个git项目，自己做的好玩也要git管理，顺便熟悉使用git指令。git clone xxxx git add . git status git commit -m "xxxx" git push git merge index-ajax(切换分支)这几个指令就足够用了。具体的还要好好学学。在码云上新建了一个自己的项目。2....
2019-10-30 16:37:34
108
原创 webpack踩坑记（一）
1.npm install --save-dev webpack webpack-cli 下载webpack以及webpack的脚手架2.新建项目文件夹，进入文件夹然后 npm init -y 这个指令可以直接初始化一个叫package.json的文件{ "name": "webpack-demo", "version": "1.0.0", "descriptio...
2019-08-14 20:08:18
359
2
原创 JavaScript语言精粹学习（一）
1.对js的注释建议使用 // 注释，不要使用/* */注释，后者在和正则表达式放一起的时候可能会出现语法错误2.undefined、NaN、Infinity 并不是JavaScript的保留字，应该被保留但是并没有被保留3.数字 JavaScript统一为64位浮点数 1e2=1*4.字符串是16位的字符集，创建即不可变5.JavaScript的所有假值：false、null、...
2019-08-12 21:04:12
118
原创 js动态添加对象使用.和[ ]的区别
js动态添加对象使用.和[ ]的区别obj.name 那么name必须为字符串，不能为数字或者其他类型的obj['name'] name可以是任意字符，包括字符，数字，甚至是函数对象等等...
2019-08-12 10:28:14
210
原创 前端学习日记19-7-24
今天在csdn上解决问题时候，看到两个自己也不懂的问题。1.localStorage、sessionStorage、Cookie的区别及用法。主要是localStorage，感觉很好用。还有个小例子，比如给新用户一个好看的弹框，或者只给第一次进入网页的用户一个小广告，嘿嘿~之后的在进入该网页又没有广告。可以使用localStorage存储数据，然后之后再验证是否是第一次进入。非常好用，以后一定...
2019-07-24 16:55:14
3028
原创 原生js document.getElementById(“id“)获取对象与jQuery $(“#id“)获取对象区别
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #li1{ background-color: red; width: 300px; } #li2{ b...
2019-07-12 18:13:20
2482
原创 点击div即可切换单选框
今天再优快云问答上看到个问题，点击li同时改变单选框的checked状态。最开始思路使用jQuery的attr（）和removeAttr（）两个方法实现。后来发现问题，removeAttr（）去掉checked属性，但是单选框的选中点依旧没有去掉。但是dom结构中已经没有了checked属性，给人一种网页没有重绘的感觉。于是在网上找了下答案，自己再改了一些。感觉这个问题以后也有可能遇到，所以...
2019-07-10 17:56:40
1176
1
vue 如何修改获取到的component组件中的prop参数
2022-05-16
vue3 setup语法糖 利用父组件 的传值问题
2022-01-17
D3.js 引入后使用transition()函数报错
2021-12-20
平铺数据转化树形数据
2020-05-22
js 函数如何做到延迟一秒返回参数。
2019-11-06
请问a+++a;a的值是怎么变化的，越详细越好。谢谢各位大佬！
2019-09-23
new出对象，对象调用方法。报错不是一个function
2019-09-16
Vue + ts 的问题 【对象文字可以只指定已知属性】
2019-08-22
TA创建的收藏夹 TA关注的收藏夹
TA关注的人