自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

lzfengquan的博客

希望对大家有所帮助

  • 博客(296)
  • 收藏
  • 关注

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

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

2024-02-21 17:31:45 100

原创 react实现转盘抽奖功能

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

2024-02-20 16:35:14 785

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

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

2024-02-20 11:15:07 264

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

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

2024-02-19 11:43:28 306

原创 前端 webSocket 的使用

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

2024-02-19 09:48:15 448

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

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

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

2024-02-04 09:16:54 350

原创 前端 .then 返回有数据但是return 不出来 ,并 解决处理后的 Promise下的Object

.then 返回有数据但是return 不出来 ,并获取处理后的 Promise下的Object。原因是:因为axios是异步操作,在获取返回值时请求操作还没有完成就已经完成了赋值操作,所以结果的undefined。当我打印了返回的return 值发现 并没有直接返回我想要的数据,而是在Promise 内部。当我封装完成后在内部打印发先我的数据能够拿到,但是return 的时候一直都市undefined.此时则需要对其进行处理改装成异步,即加上 async 和await 就可以了。

2024-01-25 12:45:17 418

原创 修改el-date-picker datetimerange内部样式 或 popper-class不生效

更改 el-date-picker datetimerange 弹框内的样式或 popper-class不生效。我们需要在重新写个style在这当前页面下即可,或者在最外层重新写个样式。我这里直接放在了当前页面下。这时我们需要看 样式 是否加了 scoped。这个的作用就是样式隔离了。看官网介绍 需要添加一个 popper-class类名去控制。有可能发现 popper-class不生效。

2024-01-25 10:28:14 624

原创 element el-date-picker type=“datetimerange“

刚写完结果需求变更了。封装的时间组件重新做。结合eacharts。折线图处理,这里没有放封装的折线。

2024-01-25 09:18:49 513

原创 封装 element el-date-picker时间选择区间

效果: 1 大于当前时间的以后日期禁选。2 选中时间的前后七天可选 (最多可查询7天数据)3。基于el-date-picker 处理满足项目需求。

2024-01-24 15:04:41 619

原创 vue 一键换肤

一键换肤 操作:页面中只需要添加一键换肤的操作时间进行配色即可。一般就是两种颜色,默认色和改变色,我的需求是改背景色,不改字体色,因为字体的色值颜色太多。我用了本地存储localStorage加store。思路,可以运用element 内的组件配合css样式。在需要的页面进行计算属性。在store 中存储。

2024-01-18 08:45:31 486

原创 js 回文串

这种方法的基本思路是将字符串转换为数组,然后反转数组,并将反转后的数组转换回字符串,最后将两个字符事进行比较。要实现这一思路,我们可以使用 JavaScript 字符串的一些方法。我是忽略了所有的空格和符号,直接进行反转比较的。思路: 判断一个字符串是否为回文字符串的基本思路是。两者相同,则该字符串是回文字符串,否则不是。

2024-01-16 10:00:25 396

原创 vue 渲染数组,拖拽排序,渲染同一个数组拖拽排序不影响其他选中行状态

拖拽排序

2024-01-15 09:22:08 435

原创 vue v-for循环拖拽排序,实现数组选中的数据拖拽后对应的子数据也进行重新排序

拖拽排序

2024-01-12 12:17:31 507

原创 vue 点击改变数组中选中的icon颜色(结合拖拽实现)

在Vue中,可以通过使用v-bind指令来动态地修改元素的样式。要根据点击事件来改变数组中选中图标的颜色,首先需要定义一个data属性来存储当前被选中的索引值或者其他相关信息。然后,在模板中使用v-for指令来迭代生成每个图标,并为每个图标添加点击事件处理函数。展示部分代码,去除了点击事件,因为拖拽自带了时间,把变色写在拖拽事件中。vue 点击改变数组中选中的icon颜色。在保存事件中记得清空颜色选中状态没可那需求。methods 方法中处理。data 中定义初始值。css样式中设置 颜色。

2024-01-08 17:40:44 470

原创 echarts 折线图根据x轴时间渲染不同颜色的折线

后端数据返回"data": [如上图所示一条折线多种颜色。

2023-12-29 13:37:53 444

原创 js 两个数组比较过滤返回匹配的数据

filter 过滤

2023-12-22 17:19:24 43

原创 vue 全局定时更新 轮询

首先需要在最外层的父组件定义一个刷新的时间 初始值为nulll, 在定义一个新时间用于监听状态的变化。然后再 template 中找到我们的父组件 component 把时间穿进去,在子页面接收并监听这个时间,去触发接口更新后,每间隔时间查询更新接口。首先需要在最外层的父组件定义一个刷新的时间 初始值为nulll, 在定义一个新时间用于监听状态的变化。在需要的子组件中接收props:{}然后再钩子函数中执行定义封装的方法。

2023-12-21 13:34:24 117

原创 js用splice()方法进行数组去重 同一个数组中对象去重 双for循环对比

splice()方法进行数组去重 同一个数组中对象去重。

2023-12-21 13:11:38 384

原创 实现下拉框 三级禁选

data是一个数组传给下边的方法。

2023-12-19 16:17:58 19

原创 数组中的某值,添加到数组的对象中成为新的数组

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 51

原创 vue3自动拖拽

vue3 实现简单的拖拽效果

2023-09-08 17:15:46 296

原创 前端 按钮 loading效果阻断不了快速点击,执行防抖操作进行阻断接口连续调用

页面中执行了按钮的连续点击操作,虽然前端在按钮中加了loading效果,但是发现,如果点击速度很快,那么loading效果来不及赋值并执行,此时就会出现连续的接口调用造成数据保存或流程数据出现错误或重复数据新增。然后 在页面中引用方法即可。

2023-09-07 17:45:39 699

原创 前端 js实现 选中数据 动态 添加在表格中

如下图展示,表格上方有属性内容,下拉选中后,根据选中的内容,添加在下方的表格中。实现方式,(要和后端约定,因为这些动态添加的字段都是后端返回的,后端自己会做处理,我们前端要做的是,就是根据后端的返回下拉数据,映射到表格上,并实现增删改查。)一般可能会 用 ``模板字符串 方法,但是有时候可以直接map赋值。如下 。

2023-08-28 16:07:29 1446

原创 实现深拷贝和浅拷贝的方式

前端 实现 深拷贝,浅拷贝

2023-08-28 15:36:53 73

原创 js实现数据关联查找更新。数据求和验证

为了实现这个功能我们和后端定义了数据结构。

2023-08-26 13:54:49 198

原创 js 获取指定时间+时间戳展示时分秒

明明有可以选择时分秒的操作非不要就要懒省事,必须是一个时间显示成选中的年月日,但是时间格式要给后端传待时分秒的格式,列表展示也要带时分秒。处理为: 选中的时间 + " " + 选中的时间.toTimeString().substr(0, 8);然后就是处理日期拼接。发现我们只要时分秒就可以了。上述封装了一个简单的日期转换,就足够用了。开发中遇见了一个客户比较扯淡的需求。

2023-08-03 11:02:32 807

原创 js 指定日期加 n 天

time为基础日期 n为指定加几天。在指定日期上增加指定几天。

2023-07-07 17:27:53 306

原创 js 纯前端实现 重新部署 通知用户刷新网页

前端重新部署后通知用户刷新网页

2023-06-29 10:56:12 599

原创 js 获取数组(对象)中的最大和最小值

js 数组获取最大 最小值

2023-06-21 11:34:25 836

原创 js 处理JSON 格式 数据

JSON.stringify() JSON.parse()

2023-06-09 10:56:43 697

原创 js 解析map (处理后端返回对象拼接)

前端处理 js map for in 循环 对象处理key值value值拼接

2023-05-23 13:48:06 622

原创 百年不用了,今天拾起来 sort() 排序

原本前端调用后端接口是自带排序功能的,一般是按照创建单据的时间,后端会处理好返回给我们。上图展示,接口请求查询正常是按照添加时间返回,前端处理后则是列表展示样式。列表和列表扩展行均要根据我们新增或编辑的时候传入的排序大小进行排序。排序号越大越靠前,那么我们就运用到数组中的sort()排序方法。但是有时候有特别的限制,需要前端自行处理排序展示。{‘name’: ‘张三’, age: 26},{‘name’: ‘李四’, age: 12},然后思路没错,那我们就直接拿数据就处理吧。那我们直接处理就OK了。

2023-05-12 11:30:37 219

原创 js判断一个数组中是否有重复的数组/ 一个数组中对象的某个属性值是否重复

1.2:先将数组转换成字符串,再遍历数组,在字符串中移除当前的数组元素之后还能找到该元素,则说明数组有重复值。2.2,先将数组转换成字符串,再遍历数组,在字符串中移除当前的数组元素之后还能找到该元素,则说明数组有重复值。2.1,先利用ES6语法Set将数组去重,之后再原数组比较长度,若长度小于原数组,则说明数组有重复值。1.3先利用ES6语法将数组去重,之后再与原数组比较长度,若长度小于原数组,则说明数组有重复值。1.1对数组进行排序,对比上一个元素和下一个元素是否相等,若相等,则说明数组有重复值。

2023-01-31 14:24:14 4209 1

原创 vue3实现购物车功能 且在需要 调取选中状态接口后 改变选中状态

【代码】vue3实现购物车功能 且在需要 调取选中状态接口后 改变选中状态。

2023-01-29 10:51:37 238

原创 js判断 数组中是否存在形同元素

js 前端 判断 数组中是否存在相同元素

2023-01-13 09:33:26 137

原创 vue3 实现放大镜

注意的是我们要用父子组件的话,在父组件调取接口进行赋值传递给子组件展示就行了。(注意的是为了得到展示效果,我们在获取数据的时候可以加判断,给一些默认数据,防止后端数据为空,页面空白的不美观)如下图展示,默认中图是第一个(我们给定一个默认值下标0)划过小图的时候中图变化,划过中图的时候大图显示并会放大。index数据布局,这里展示的多个布局。最近在做商城项目,需求有个详情的时候要用到放大镜,index的数据处理。

2022-12-30 13:47:56 548

原创 vue3实现购物车功能 computed ref reactive onMounted

可以得到我们实现的购物功能满足 全选、反选,明细选中,明细全选和反选,computed 计算属性 和 总价钱,选中件数等等操作(里面有watch 监听示例,但是不建议用,因为watch 监听太耗用性能,computed 足可以满足我们的需求了)

2022-12-21 20:44:19 857

原创 vue 实现自定义的tab选项卡

自定义tab 选项卡。 当我们选择分类的时候,可以动态的切换,展示不同的内容。

2022-12-19 21:25:58 443

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除