- 博客(305)
- 收藏
- 关注
RSS订阅原创 echarts 旭日图 层级嵌套 子级完全继承父级颜色
完成的一个需求旭日图，后来产品说二级要和一级的颜色保持一致，不能看着太浅（二级图层继承父级后会有一层浅浅的模糊痕迹，处理这个方法我是直接写的死颜色，进行itemStyle配置）如果想看旭日图功能可以看这个链接，
2024-04-29 14:59:49
204
原创 js 字符串 第一个斜杠前最后一次出现英文字母的位置并添加自定义值，返回新值
这段代码定义了一个函数findLastLetterIndexBeforeSlash，它接受一个字符串参数并返回斜杠（/）前最后一次英文字母出现的位置的索引。如果没有找到英文字母，则返回-1。要找到字符串中第一个斜杠（/）前最后一次英文字母出现的位置，可以使用正则表达式配合lastIndexOf方法。以下是实现这一功能的示例代码： 如果是匹配第一个数字前的字母加值可以看。然后可以组装我们想要的数据。
2024-04-26 13:39:41
244
原创 js 特定索引下拆分字符串并组建成新的字符串数据
要在特定索引处拆分字符串，请使用 slice 方法获取字符串的两个部分，例如 str.slice(0, index) 返回字符串的一部分，但不包括提供的索引，而 str.slice(index) 返回字符串的其余部分。方法封装： 在上述方法的基础上 再利用正则改造（我是使用正则表达式找到第一个匹配的数字）具体看你的需求。过程：我们创建一个可重用的变量，它将一个字符串和一个索引作为参数。然后使用 String.slice 方法根据提供的索引拆分字符串；就得到了新的数据，然后去赋值展示就好了。
2024-04-19 10:54:24
147
原创 vue3项目 使用 element-plus 中 el-collapse 折叠面板
我这里还用到了 el-steps ，最外层的 是自己写的样式，因为我一个页面中使用了两次el-steps ，发现样式会有干扰。最近接触拉了一个项目，使用到 element-plus 中 el-collapse 折叠面板，发现在使用中利用高官网多多少少的会出现问题。效果图 ： 当点击 了查看按钮时，弹框出现，且默认展开第一个数据，且每次的展开或者收起都有对应的样式，可见下图左侧的图样，我们的数据结构是双数组，如果你和我一样直接copy, 如果是一个对象数组或者数组吧，只需把外层的数组转化即可。
2024-04-16 15:47:41
548
原创 vue3 记录页面滚动条的位置，并在切换路由时存储或者取消
需求，当页面内容超出了浏览器可是屏幕的高度时，页面会出现滚动条。当我们滚动到某个位置时，操作了其他事件或者跳转了路由，再次回来时，希望还在当时滚动的位置。那我们就进行一下操作。利用 @scroll=“handleScroll” 事件进行操, 定义的ref 获取dom。4.路由守卫 beforeRouteLeave路由离开前记录当前的位置。我这里获取的是元素本身的滚动条事件，可不是 window的滚动条事件。注意我们需要给元素的最外层父级元素设置。3.每次进入都要将存储的位置重新赋值给页面。
2024-04-01 09:38:02
323
原创 echarts 旭日图 层级嵌套
4 交互操作丰富：Echarts旭日图支持选中、高亮、点击事件等交互操作，用户可以与旭日图进行交互，进行数据的筛选和查看。3 编码多个维度：旭日图可以编码多个维度的数据，通过扇形区域的颜色、半径或角度来表示数据的不同维度。实际项目中，我们发现官网提供的只是基础内容，有的功能我们用不到，例如官网提供的旭日图，点击了某个区域就会进行扩展, 中心没有数据, 文本超出省略配置，以及引导线配置 等。5 兼容性强：Echarts旭日图能够兼容主流的浏览器，并且提供了响应式布局的功能，可以自适应不同的屏幕尺寸。
2024-03-29 15:06:49
400
原创 Could not retrieve https://npm.taobao.org/mirrors/node/latest/SHASUMS256.txt.
最近淘宝原镜像域名（registry.npm.taobao.org）的HTTPS证书正式到期。如果想要继续使用，需要将npm源切换到新的源（registry.npmmirror.com），否则会报错。找到原因后，解决就很简单了，只需在settings.txt文件中，将nvm中的npm源切换到最新地址registry.npmmirror.com就可以了。最近发现通过nvm 下载node 不能使用了，赶紧解决下。
2024-03-14 14:38:46
455
原创 前端 实现 每5分钟遍历一次集控的数据接口,将多类型的统计结果insert到TD数据库的指标统
每5分钟遍历一次集控的数据接口,将多类型的统计结果insert到TD数据库的指标统
2024-02-27 09:01:53
427
原创 background linear-gradient参数学习与使用
direction：第一个参数表示渐变的方向。其可以是一个具体的角度值如45deg，或者是具体的方向值如to top，表示自下而上渐变；inear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。方法：linear-gradient(direction, color-stop1, color-stop2, …如 red 10%等。
2024-02-21 17:31:45
529
原创 react实现转盘抽奖功能
我们再来看另一种情况，假设第一次抽中了奖品 “air pods 2”，对应区域时3，需要转到221°，第二次抽中了 “小米智能音箱” ，对应区域是1，需要转到70°，那这种情况下，继续用 transform: rotate(70deg) 肯定是不行了，如果这样，会出现转盘逆时针转到区域1了，这样显然不是我们想要的结果，这种情况下我们就需要在70°的基础上再转360°，也就是转到430°的位置，才能达到顺时针旋转的效果。1 首先，我们简单定义一个奖品数组，实际开发中是调后台接口获取奖品，以下是为了方便演示。
2024-02-20 16:35:14
1206
原创 js 多对象去重(多属性去重)
多对象去重。上述代码首先创建了一个空的 Set 对象 set，然后利用 forEach() 方法遍历原始数组 arr，将每个对象转化成字符串形式（使用 JSON.stringify()）再添加到 Set 中。最后，通过调用 Array.from() 方法将 Set 转换为数组，并使用 map() 方法将字符串形式的对象还原为真正的对象。在 JavaScript 中，可以使用 Set 数据结构来进行多对象的去重。这样就完成了多对象的去重操作，得到的 resultArr 数组中只保留了没有重复的对象。
2024-02-20 11:15:07
473
原创 vue实现自动滚动 v-auto-scroll
在项目中，有时候需要实现自动滚动的效果。这时我们直接使用 v-auto-scroll 即可。也就是当内容超出设置元素的最大高度的时就会出现滚动条。
2024-02-19 11:43:28
546
原创 前端 webSocket 的使用
例子：现在需要根据用户不同的输入来获取后端不同的数据，http请求的方式就是每次用户输入我就发送一个http请求。然而websocket的解决是一次连接成功后，每次用户输入都会发送给后台，但是这个发送的数据却是一直处在已经连接的状态，并不是每次想http每一次都是一次新的连接。结合上述用法可以自行封装（不一定适用你的项目，不过大致逻辑就是这样）webSocket使用。
2024-02-19 09:48:15
691
原创 vue element 组件 form深层 :prop 验证失效问题解决
因为element要判断prop传递的值是否合法的话, 就只能用 一个obj 一个key 通过key in obj 这样的方式来判断, 而如果我们不把 要循环或者要绑定的某值yyy 放到 :model 的 xxxx中, form-item在mounted的时候 是拿不到外面this的data的, 所以他无法判断 当前传进来的pumplist到底是谁, 也就没有办法使用key in obj.。我们来看一下 我们代码中传输的model是什么就可以了（要匹配或者包含在内）。越看越像js的一个面试题。
2024-02-05 16:31:00
823
原创 实现 组件： 拖拽、缩放、 生成辅助线 以及吸附功能。
遍历画布上的所有元素（除了当前拖拽元素），并为每个元素计算并保存辅助线的位置。在拖拽过程中，监听 drag 事件，并将拖拽元素的位置与之前保存的数据进行比较。当拖拽元素时，通过比较拖拽元素与画布上其他元素的位置，当某个元素与拖拽元素的距离接近时，显示辅助线。顶对顶：拖拽元素的顶部与对比元素的顶部对齐。顶对底：拖拽元素的顶部与对比元素的底部对齐。底对顶：拖拽元素的底部与对比元素的顶部对齐。底对底：拖拽元素的底部与对比元素的底部对齐。中：拖拽元素的中部与对比元素的中部对齐。top：用于计算对齐位置的参考位置。
2024-02-04 09:16:54
600
3
原创 前端 .then 返回有数据但是return 不出来 ，并 解决处理后的 Promise下的Object
.then 返回有数据但是return 不出来 ，并获取处理后的 Promise下的Object。原因是：因为axios是异步操作，在获取返回值时请求操作还没有完成就已经完成了赋值操作，所以结果的undefined。当我打印了返回的return 值发现 并没有直接返回我想要的数据，而是在Promise 内部。当我封装完成后在内部打印发先我的数据能够拿到，但是return 的时候一直都市undefined.此时则需要对其进行处理改装成异步，即加上 async 和await 就可以了。
2024-01-25 12:45:17
623
原创 修改el-date-picker datetimerange内部样式 或 popper-class不生效
更改 el-date-picker datetimerange 弹框内的样式或 popper-class不生效。我们需要在重新写个style在这当前页面下即可，或者在最外层重新写个样式。我这里直接放在了当前页面下。这时我们需要看 样式 是否加了 scoped。这个的作用就是样式隔离了。看官网介绍 需要添加一个 popper-class类名去控制。有可能发现 popper-class不生效。
2024-01-25 10:28:14
831
原创 element el-date-picker type=“datetimerange“
刚写完结果需求变更了。封装的时间组件重新做。结合eacharts。折线图处理，这里没有放封装的折线。
2024-01-25 09:18:49
728
原创 封装 element el-date-picker时间选择区间
效果： 1 大于当前时间的以后日期禁选。2 选中时间的前后七天可选 （最多可查询7天数据）3。基于el-date-picker 处理满足项目需求。
2024-01-24 15:04:41
665
原创 vue 一键换肤
一键换肤 操作：页面中只需要添加一键换肤的操作时间进行配色即可。一般就是两种颜色，默认色和改变色，我的需求是改背景色，不改字体色，因为字体的色值颜色太多。我用了本地存储localStorage加store。思路，可以运用element 内的组件配合css样式。在需要的页面进行计算属性。在store 中存储。
2024-01-18 08:45:31
533
原创 js 回文串
这种方法的基本思路是将字符串转换为数组，然后反转数组，并将反转后的数组转换回字符串，最后将两个字符事进行比较。要实现这一思路，我们可以使用 JavaScript 字符串的一些方法。我是忽略了所有的空格和符号，直接进行反转比较的。思路： 判断一个字符串是否为回文字符串的基本思路是。两者相同，则该字符串是回文字符串，否则不是。
2024-01-16 10:00:25
422
原创 vue 点击改变数组中选中的icon颜色(结合拖拽实现)
在Vue中，可以通过使用v-bind指令来动态地修改元素的样式。要根据点击事件来改变数组中选中图标的颜色，首先需要定义一个data属性来存储当前被选中的索引值或者其他相关信息。然后，在模板中使用v-for指令来迭代生成每个图标，并为每个图标添加点击事件处理函数。展示部分代码，去除了点击事件，因为拖拽自带了时间，把变色写在拖拽事件中。vue 点击改变数组中选中的icon颜色。在保存事件中记得清空颜色选中状态没可那需求。methods 方法中处理。data 中定义初始值。css样式中设置 颜色。
2024-01-08 17:40:44
731
原创 vue 全局定时更新 轮询
首先需要在最外层的父组件定义一个刷新的时间 初始值为nulll, 在定义一个新时间用于监听状态的变化。然后再 template 中找到我们的父组件 component 把时间穿进去，在子页面接收并监听这个时间，去触发接口更新后，每间隔时间查询更新接口。首先需要在最外层的父组件定义一个刷新的时间 初始值为nulll, 在定义一个新时间用于监听状态的变化。在需要的子组件中接收props：{}然后再钩子函数中执行定义封装的方法。
2023-12-21 13:34:24
267
原创 数组中的某值，添加到数组的对象中成为新的数组
this.tableData = JSON.parse(JSON.stringify(tabArr)).reverse() // 表格数据。this.dataList = JSON.parse(JSON.stringify(echartData2)) // echarts 数据。v.runState = 4 // 最后一个时间截止后无法预估后续的状态，默认赋值0 停机。我想要这个数组的第二项time在第一项的里面赋值新key 以此类推。
2023-12-18 18:21:17
74
原创 前端 按钮 loading效果阻断不了快速点击，执行防抖操作进行阻断接口连续调用
页面中执行了按钮的连续点击操作，虽然前端在按钮中加了loading效果，但是发现，如果点击速度很快，那么loading效果来不及赋值并执行，此时就会出现连续的接口调用造成数据保存或流程数据出现错误或重复数据新增。然后 在页面中引用方法即可。
2023-09-07 17:45:39
799
原创 前端 js实现 选中数据 动态 添加在表格中
如下图展示，表格上方有属性内容，下拉选中后，根据选中的内容，添加在下方的表格中。实现方式，（要和后端约定，因为这些动态添加的字段都是后端返回的，后端自己会做处理，我们前端要做的是，就是根据后端的返回下拉数据，映射到表格上，并实现增删改查。）一般可能会 用 ``模板字符串 方法，但是有时候可以直接map赋值。如下 。
2023-08-28 16:07:29
1585
原创 js 获取指定时间+时间戳展示时分秒
明明有可以选择时分秒的操作非不要就要懒省事，必须是一个时间显示成选中的年月日，但是时间格式要给后端传待时分秒的格式，列表展示也要带时分秒。处理为： 选中的时间 + " " + 选中的时间.toTimeString().substr(0, 8);然后就是处理日期拼接。发现我们只要时分秒就可以了。上述封装了一个简单的日期转换，就足够用了。开发中遇见了一个客户比较扯淡的需求。
2023-08-03 11:02:32
882
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人