- 博客(11)
- 收藏
- 关注
RSS订阅原创 JavaScript 基于HSL色彩空间随机生成区分度较大的颜色
在Vue项目开发中，由于图表上要显示的线较多，需要尽可能地生成一些对比较强的颜色，防止不同的线混杂在一起分辨不清，于是用js写了一个类来实现需求。js的原生随机方法Math.random()并不支持设置种子，因此需要根据线性同余法的原则写一个支持设置种子的随机数生成器。但是由于仍然存在随机到相似颜色的可能性，所以要设置好一个随机种子，每次执行随机都是同样的结果。可以通过index找到指定随机迭代次数的结果，也可以直接执行方法获得一个随机颜色。这里绑定默认的种子为2，也支持在创建类时手动输入。
2024-09-25 16:53:50
541
原创 Vue2/Element-UI 优化封装el-date-picker组件-github开源分享
基于Vue2及Element-UI的自定义封装组件
2024-09-24 11:01:23
983
原创 Vue2 子组件参数与父组件的双向绑定
在 Vue 2 中，通过props字段可以实现父组件向子组件的单向数据流，在父组件数据发生变化时，会实时地传递给子组件，而子组件无法修改父组件传递的数据。以下提出的部分方法为网上收集整理资料得出，未经实践，如有错误欢迎指出。
2024-09-23 13:58:08
831
原创 Vue2/element-ui el-table实现指定行的隐藏与显示，并自动根据显示的行数调整列表合并项
目标效果：根据el-checkbox组件绑定选择的属性，自动调整表项，以实现只显示选中的属性，并且自动调整列表合并项，以实现年份和属性的正确对应。
2024-07-29 11:05:02
639
原创 Vue2/Python 实现文件通过post接口上传到后端并进行读取
设置action='#'，因为action中填入url之后，无法再自定义请求体的内容，只会把文件直接传输过去。实现思路：前端页面通过el-upload组件来上传文件，并通过接口将文件和其他数据打包发送到后端；后端通过pandas库的功能实现对文件的读取，并根据读取的数据进行一些具体的操作。为了实现点击创建按钮后触发上传，需要在按钮绑定的submitUpload方法中触发el-upload的提交。从options中读取file文件，若为多个文件上传，可以读取fileList来上传。
2024-07-23 18:13:44
563
原创 Vue2/Echarts 在加载时从缓存页面离开再返回后图表不能正常显示的问题以及图表自动随页面大小缩放功能实现
现有存放图表的页面A与一个其他页面B，A设置了keep-alive为true，在等待A页面数据加载时，切换到页面B，等待一段时间后再切回A，发现A中的除图表外数据都正常显示，图表不显示。由于图表在初始化过程中，需要读取dom元素的宽高以实现图表显示的渲染，但此时已经切换到其他页面，因此在读取dom元素的过程中出现了上述警告内容，并且渲染失败。在activated部分中，自动触发一次echarts图表对象的resize操作，即重新匹配dom元素的宽高。
2024-07-18 11:37:02
490
原创 vue2/Echarts 实现模拟slider缩放/拖动松手后触发事件效果
因为Echarts自带的datazoom事件只要拖动缩放条就会触发，过于频繁了，因此想要实现松手后再触发的效果，但Echarts组件内并没有这样的事件，网上也没有查到相关的使用，因此自己尝试用setTimeout函数来模拟了松手触发事件的效果。倒计时结束后，触发想要在松手后触发的事件（此处为reComputeData）；若在设置的时间范围内重复触发，则将清除之前设置的倒计时，并重新倒计时；目标：实现图表数据在进行数据范围缩放或变化后进行数据的实时更新效果。在触发缩放事件时初始化一个计时器；
2024-07-12 16:22:39
723
原创 Vue2/js 将文件内容转化为Blob对象并创建下载任务
data属性中存放着文件内容，但是是字符串格式，需要转化为Blob（Binary Large Object：二进制大数据对象）后才能进行下载。document.createElement方法创建一个a元素。setAttribute方法定义类型为下载，并赋值文件名。通过调用接口获得了一个文件，格式如图。触发a元素的点击事件，进行下载。
2024-07-10 14:22:07
770
原创 Vue2/element-ui 实现el-table表头纵向显示效果
接下来的思路很简单：perf_yearly中的每一个元素对应一个属性在所有年份的值，因此按列打印即可；这样一来，perf_yearly的所有属性名与内部对象的属性名也成为了数组，存储在perf_yearlyColumnList与yearList中。此处涉及到在一个el-table组件内调用两个数组数据的操作：用插槽读取当前索引值，然后调用另一个数组来直接进行显示。如果perf_yearly中的对象内属性名并不相同，可以把prop设为index，通过索引而不是属性名来读取数据。
2024-07-09 15:25:07
1072
原创 Vue2/js 实现子组件向父组件通信以实现在router-view组件内的自动向下滚动
由于在子组件中自己实现滚动到底部的效果时，需要设置子组件页面自己的高度来允许滚动，导致在router-view视野下出现两个滚动条，很不美观，所以尝试使用$refs通信来实现对父组件页面元素的调用。最终实现自动检查当前是否已经滚动到底部，若在底部，则随日志更新时自动显示最新消息（滚动到底部），若不在则不进行任何操作。父组件在对组件实例进行绑定时，需要选择能滚动的元素来绑定，否则scrollTo方法会报错并失效。目标：通过$refs通信，实现子组件调用父组件，将页面自动滚动至最底部。
2024-07-09 14:38:59
535
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人