小刘先生很努力-CSDN博客

原创前端 js 处理一个数组展示成层级下拉样式

前端开发中，不管是什么时候都会遇到select 下拉框的使用，一般情况下，数据处理后端都会处理好。前端一般使用相应技术栈所推荐的公共组件就可以了。前端处理的前提是要确定那个是父级元素，那个是子级元素，这样才能更好的处理数据。这个时候前端要写个方法去处理这个数组了。这个数组后端是会给的。

2024-10-17 09:40:47 591

原创 vue3 更改 element-plus el-collapse 折叠面板样式

样式更改箭头指向。

2024-08-14 13:53:33 1669

原创 vue3 层级选择器 el-cascader展示更多的信息

cascader 正常情况下可以满足我们所需，一般展示的就是 {label:‘’；value:‘’} 但有时候需要展示更多的信息工用户查看，如下图。此时就需要我们进行一定的改造。css 样式可自己处理。

2024-06-25 09:45:45 721

原创 vue3 element-plus 实现 table表格合并单元格和多级表头

实现合并单元格和多级表头可以直接用官网提供的写法，但是有可能数据会比较多的时候，就需要我们稍微改造一下，方便以后再出现合并的数据，直接可以公用。注意的项是要和并的字段不一样，我们需要单独去设置；spanMethod 方法会根据设定的 merge 值去合并；spanArr 方法执行计算属性，添加我们的判断条件。注意的是，可能需求不同，但是方法是一样的。只需要把方法中的值替换即可实现公用。满足条件的进行合并，不满足的则是单独一行展示。表格的数据布局 index.vue。数据的映射config.ts 页面

2024-06-21 11:27:06 3700

原创 vue3 运用高德地图自定义弹框为信息窗体添加 new AMaps.value.InfoWindow 添加事件

vue3 运用高德地图自定义弹框为信息窗体添加 new AMaps.value.InfoWindow 添加事件。点击具体散点获取展示信息弹框，并为其添加点击事件。划过散点的时候出现每个三点位置的数据提示。

2024-06-20 15:40:20 2131

原创使用nvm管理node多版本（安装、卸载nvm，配置环境变量，更换npm淘宝镜像）淘宝的镜像域名更换

最近使用nvm 管理 node 的时候发现nvm install node版本号总是失败。查看原因，。所以造成我们下的任何管理包都会出问题。最干净的解决方式，就是重新安装，省掉不必要的麻烦。公司项目一般都会有很多新老的，所依据的node版本也不同，所以我们干净带你直接使用nvm 来管理和下载一级切换node 方便的很。卸载完之后cmd命令行输入 node -v 查看是否还能查到node信息，无的话表示删除干净。一、卸载node。

2024-05-28 14:55:24 1219

原创 css 画一个梯形

注意的是 top 值要调整下，我这边是自己写的，后来给了设计图，直接替换了设计图。最好还是出设计图直接点。

2024-05-22 17:09:15 501

原创 vue3 实现 table 跨页多选

注意的是 getRowKeys 方法中我们获取的是项目列表的每一项的id ，有可能数据返回的字段并不是id,我们要对接到后端，确定每条数据的唯一性标识。Vue3 配合 element-plus 实现表格的跨页多选，我们只需要去研究下官方配置的属性和事件即可。注意的是要给多选框设定type类型为selection。

2024-05-17 11:49:04 566

原创前端 finalShell 与 docker 创建服务连接部署项目

准备官网下载地址要哪个下那个，我的是第一个下载后安装打开选择 SSH 进行配置配置后点击确定即可1、yum install -y docker -y 表示不询问，使用默认配置进行安装检测版本装最新的2、 yum list installed | grep docker 查看yum安装完成文件列表并筛选docker安装信息3、systemctl status docker 查看docker当前服务状态，active：inactive(dead)未开启，死亡状态。

2024-05-14 10:20:00 1924 1

原创 echarts 旭日图层级嵌套子级完全继承父级颜色

完成的一个需求旭日图，后来产品说二级要和一级的颜色保持一致，不能看着太浅（二级图层继承父级后会有一层浅浅的模糊痕迹，处理这个方法我是直接写的死颜色，进行itemStyle配置）如果想看旭日图功能可以看这个链接，

2024-04-29 14:59:49 461

原创 js 字符串第一个斜杠前最后一次出现英文字母的位置并添加自定义值，返回新值

这段代码定义了一个函数findLastLetterIndexBeforeSlash，它接受一个字符串参数并返回斜杠（/）前最后一次英文字母出现的位置的索引。如果没有找到英文字母，则返回-1。要找到字符串中第一个斜杠（/）前最后一次英文字母出现的位置，可以使用正则表达式配合lastIndexOf方法。以下是实现这一功能的示例代码：如果是匹配第一个数字前的字母加值可以看。然后可以组装我们想要的数据。

2024-04-26 13:39:41 378

原创 js 特定索引下拆分字符串并组建成新的字符串数据

要在特定索引处拆分字符串，请使用 slice 方法获取字符串的两个部分，例如 str.slice(0, index) 返回字符串的一部分，但不包括提供的索引，而 str.slice(index) 返回字符串的其余部分。方法封装：在上述方法的基础上再利用正则改造（我是使用正则表达式找到第一个匹配的数字）具体看你的需求。过程：我们创建一个可重用的变量，它将一个字符串和一个索引作为参数。然后使用 String.slice 方法根据提供的索引拆分字符串；就得到了新的数据，然后去赋值展示就好了。

2024-04-19 10:54:24 365

原创 vue3项目使用 element-plus 中 el-collapse 折叠面板

我这里还用到了 el-steps ，最外层的是自己写的样式，因为我一个页面中使用了两次el-steps ，发现样式会有干扰。最近接触拉了一个项目，使用到 element-plus 中 el-collapse 折叠面板，发现在使用中利用高官网多多少少的会出现问题。效果图：当点击了查看按钮时，弹框出现，且默认展开第一个数据，且每次的展开或者收起都有对应的样式，可见下图左侧的图样，我们的数据结构是双数组，如果你和我一样直接copy, 如果是一个对象数组或者数组吧，只需把外层的数组转化即可。

2024-04-16 15:47:41 3371

原创 vue3 记录页面滚动条的位置，并在切换路由时存储或者取消

需求，当页面内容超出了浏览器可是屏幕的高度时，页面会出现滚动条。当我们滚动到某个位置时，操作了其他事件或者跳转了路由，再次回来时，希望还在当时滚动的位置。那我们就进行一下操作。利用 @scroll=“handleScroll” 事件进行操, 定义的ref 获取dom。4.路由守卫 beforeRouteLeave路由离开前记录当前的位置。我这里获取的是元素本身的滚动条事件，可不是 window的滚动条事件。注意我们需要给元素的最外层父级元素设置。3.每次进入都要将存储的位置重新赋值给页面。

2024-04-01 09:38:02 2059

原创 echarts 旭日图层级嵌套

4 交互操作丰富：Echarts旭日图支持选中、高亮、点击事件等交互操作，用户可以与旭日图进行交互，进行数据的筛选和查看。3 编码多个维度：旭日图可以编码多个维度的数据，通过扇形区域的颜色、半径或角度来表示数据的不同维度。实际项目中，我们发现官网提供的只是基础内容，有的功能我们用不到，例如官网提供的旭日图，点击了某个区域就会进行扩展, 中心没有数据, 文本超出省略配置，以及引导线配置等。5 兼容性强：Echarts旭日图能够兼容主流的浏览器，并且提供了响应式布局的功能，可以自适应不同的屏幕尺寸。

2024-03-29 15:06:49 1024 2

原创 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 991

原创 vue js计时器

需求即是，点击了某人话机进行通讯，当获取通讯接口成功后开始计算通话时长。

2024-02-28 11:56:54 494

原创前端实现每5分钟遍历一次集控的数据接口,将多类型的统计结果insert到TD数据库的指标统

每5分钟遍历一次集控的数据接口,将多类型的统计结果insert到TD数据库的指标统

2024-02-27 09:01:53 520

原创 background linear-gradient参数学习与使用

direction：第一个参数表示渐变的方向。其可以是一个具体的角度值如45deg，或者是具体的方向值如to top，表示自下而上渐变；inear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。方法：linear-gradient(direction, color-stop1, color-stop2, …如 red 10%等。

2024-02-21 17:31:45 797

原创 react实现转盘抽奖功能

我们再来看另一种情况，假设第一次抽中了奖品 “air pods 2”，对应区域时3，需要转到221°，第二次抽中了 “小米智能音箱” ，对应区域是1，需要转到70°，那这种情况下，继续用 transform: rotate(70deg) 肯定是不行了，如果这样，会出现转盘逆时针转到区域1了，这样显然不是我们想要的结果，这种情况下我们就需要在70°的基础上再转360°，也就是转到430°的位置，才能达到顺时针旋转的效果。1 首先，我们简单定义一个奖品数组，实际开发中是调后台接口获取奖品，以下是为了方便演示。

2024-02-20 16:35:14 1937

原创 js 多对象去重(多属性去重)

多对象去重。上述代码首先创建了一个空的 Set 对象 set，然后利用 forEach() 方法遍历原始数组 arr，将每个对象转化成字符串形式（使用 JSON.stringify()）再添加到 Set 中。最后，通过调用 Array.from() 方法将 Set 转换为数组，并使用 map() 方法将字符串形式的对象还原为真正的对象。在 JavaScript 中，可以使用 Set 数据结构来进行多对象的去重。这样就完成了多对象的去重操作，得到的 resultArr 数组中只保留了没有重复的对象。

2024-02-20 11:15:07 621

原创 vue实现自动滚动 v-auto-scroll

在项目中，有时候需要实现自动滚动的效果。这时我们直接使用 v-auto-scroll 即可。也就是当内容超出设置元素的最大高度的时就会出现滚动条。

2024-02-19 11:43:28 1146

原创前端 webSocket 的使用

例子：现在需要根据用户不同的输入来获取后端不同的数据，http请求的方式就是每次用户输入我就发送一个http请求。然而websocket的解决是一次连接成功后，每次用户输入都会发送给后台，但是这个发送的数据却是一直处在已经连接的状态，并不是每次想http每一次都是一次新的连接。结合上述用法可以自行封装（不一定适用你的项目，不过大致逻辑就是这样）webSocket使用。

2024-02-19 09:48:15 1645

原创 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 1781

原创实现组件：拖拽、缩放、生成辅助线以及吸附功能。

遍历画布上的所有元素（除了当前拖拽元素），并为每个元素计算并保存辅助线的位置。在拖拽过程中，监听 drag 事件，并将拖拽元素的位置与之前保存的数据进行比较。当拖拽元素时，通过比较拖拽元素与画布上其他元素的位置，当某个元素与拖拽元素的距离接近时，显示辅助线。顶对顶：拖拽元素的顶部与对比元素的顶部对齐。顶对底：拖拽元素的顶部与对比元素的底部对齐。底对顶：拖拽元素的底部与对比元素的顶部对齐。底对底：拖拽元素的底部与对比元素的底部对齐。中：拖拽元素的中部与对比元素的中部对齐。top：用于计算对齐位置的参考位置。

2024-02-04 09:16:54 1799 4

空空如也

空空如也