- 博客(78)
- 收藏
- 关注
RSS订阅原创 wechat-003-学习笔记
小程序加载第三方包只能从miniprogram_npm文件夹中找，npm i之后必须构建一下。构建npm之后，根目录会出现“miniprogram_npm”文件夹。8.性能优化：有些当前页面的接口，应该考虑是否需要再二次请求的情况，视情况考虑缓存。pubsub-js ：可以实现小程序中页面与页面之间的通信。1.路由跳转页面：携带的参数会出现在onlaod中的options中。注意：原生小程序对路由传参的长度也有限制，过长会被截掉。3.在根目录中的app.json文件中配置。动态设置当前页面的标题。
2025-05-29 15:10:28
268
原创 上班带饭素材
芹菜炒千张 || 芹菜炒香干 || 芹菜炒五花 || 芹菜炒香肠 || 芹菜炒鸡蛋。清炒西蓝花 + 欧芹大蒜盐。清炒生菜 + 欧芹大蒜盐。油焖大虾（周末休息做）
2025-05-29 15:09:57
24
原创 Debug-037-table列表勾选回显方案
效果展示：图1图2最近实现一个支持勾选的el-table可以回显之前勾选项的功能。实现了一个“编辑”的功能： 在图1中的列表中有三行数据，当点击“更换设备”按钮时，打开抽屉显示el-table组件如图2所示，可以直接回显勾选上图1的上个对应的3行数据。 当我们重新勾选图2中的其他三行，做更新操作时，点击确认关闭弹窗，图1的列表数据会更新。再次打开抽屉，初始化会重新勾选3行新数据。思路：主要是利用了elementUI-plus中el-table组件的一个方法：toggleRowSe
2025-03-21 15:11:39
479
原创 Debug-036-el-form横向表单-字段对齐的处理（2）
这次这个问题同样是我在使用el-form时使用的是“行内表单”，但是当某一个输入框的类型为type="textarea"时，人为手动去调整其高度时，这一行的其他输入框或者说是el-form-item位置会变化。这个思路是受到之前的那篇文章的影响，但是由于之前的图片是高度固定的，所以还是好实现的，但是这里高度不固定，所以我自然而然想到了监听的方法。我发现左侧的元素虽然会随着textarea的高度变化，但是始终它都在居中的位置。监听textarea的高度变化，动态的去调整左侧输入框的高速，使二者保持一致。
2025-03-21 14:27:03
444
原创 Debug-034-elementUI中Message消息多次触发只提示一次
只要是用过elementUI的各位，肯定知道其中的“Message 消息提示”组件。一般执行完特定操作或者前端根据接口返回信息报出一个全局提示的作用。
2024-12-05 15:54:41
840
原创 Debug-035-el-form横向表单-字段对齐的处理
这是一个我们业务中的横向表单，用于展示设备的某些属性字段。功能也很容易实现，问题是最后一行的左右两个表单元素不能对齐（"照片字段"和”参数字段“），这个就是会有一点强迫症。原因很简单，是”照片“的高度将el-form-item撑起来了，这里照片给的是宽高各120px。然后现象就是”参数“字段垂直方向是居中对其的，但我希望让这一行的两个表头字段是对齐的。给最后一项el-form-item的样式上添加margin-top,调整它的上边距。至此，使用方案3以后如果再追加新的展示字段，也不会有问题。
2024-12-05 15:51:34
393
原创 Debug-033-input输入框的浏览器默认填充密码的行为（未解决）
一般来讲不会超过三个，我看阿里云的设置密码就想到这个问题了，我没有别人的号，所以不会被记录到，而我们这里使用的是测试账号，记录过很多同事的账号，所以积累的比较多，其实只要用户一旦输入一个值之后，浏览器的填充就会消失了，没太大影响。想讨论的是如图二所示的问题：浏览器默认填充密码的行为。上面两个截图是MDN给出的解释，比较客观的表达了，确实不一定生效，有浏览器版本因素和不同浏览器的兼容因素。这里首先就给大家排出掉网上的一些很奇怪的“偏门方法”，我仔细想了一下，得不偿失，而且很多都是错的，完全没用。
2024-11-25 13:35:40
676
原创 Debug-032-前端F12-查看伪元素的一个小技巧
举个例子：这张图是elementUI中的一个button按钮，我想知道它在鼠标悬浮的时候是什么样式该？从哪里找到？
2024-11-21 14:22:08
457
原创 Debug-031-近期功能实现小结
这个还是挺有意思的，前端的html和css是有简写方式的，我在vscode中实际测试了一下，如果熟练了之后确实很方便，还挺酷的。以前也这么写过，但是没有意识去特意留意这一块。理解之后，在之后的开发中可以留意着去按这种方式去写一下标签和样式。Emmet语法总结-CSDN博客Emmet 总结(这真是一个省事的好工具)_emmet工具-CSDN博客前端开发必备！Emmet使用手册 - 前端开发者学堂 (fedev.cn) - 前端开发社区。
2024-11-21 13:54:11
902
原创 git-代码管理-经验分享
而对于你真正需要用到它的时候，你再好好借助那个时候特定场景去反复练习一下就会特别加深你的印象，不过这里提醒一下哈，最后先切换一下分支，新建一条测试分支，你想怎么搞都没事儿，为了以防万一，千万别在你的开发分支上乱测试（别问我是怎么知道的，在本人不熟练的时候以前是有过惨痛教训的）。那么回到git上面来，我是这么做的，对于一些前置工作可以先做起来，对于有难度的可以先行调研，一旦完成小的功能点或者你尝试使用多种方式去实现某一个功能的时候，就可以使用git stash指令将它们分别保存成不同的id。
2024-10-22 17:25:48
1109
原创 组件封装-双el-select联动搜索-实现方案&经验分享
（1）product-device-select组件-”产品+设备“ 的概念因为我们是做物联网（IoT）平台的相关业务，所以，对这个概念比较熟悉了。就是我登录自己的账号，其中有我公司创建的10个产品，其中不同的产品下有不同数量的设备。如果你不太明白的话，再举个例子：把产品比喻成名著，我有四个产品分别是：西游记、水浒传、三国演义、红楼梦；那么设备就比喻成其中的人物。西游记中可以有孙悟空、猪八戒等；三国演义中有刘备、曹操等等。水浒传里有武松、林冲等等。
2024-10-22 16:25:24
1223
2
原创 git-合并连续两次提交（一个功能，备注相同）
场景是这样，由于我是实现一个功能，先进行了一次commit,然后我发现写的有些小问题，优化了一下功能并且把代码优化了一次，于是又提交了一次。两次的提交都是以相同的备注（当然这个无所谓），我想把两次提交合并成为一次提交，精简我的git记录。这里利用的是git reset指令回退版本利用--soft保留之前的提交到暂存区的技巧。还有其他方式以后分享。
2024-10-16 18:12:06
894
原创 Debug-029-el-table实现自动滚动&分批请求数据
最近做了一个小优化，还是关于展示大屏方面的。大屏中使用el-table展示列表数据，最初的方案是将数据全部返回，确实随着数据变多有性能问题，有时请求时间比较长。这里做的优化就是实现列表的滚动到距离底部一定高度时再次请求接口数据，实现分批请求提升性能。然后这里也实现让el-table自动滚动的功能。
2024-10-16 15:22:52
1634
1
原创 Debug-028-el-carousel走马灯-当展示图片为2的问题处理
在项目中有些数据需要轮播展示时，使用Carousel组件非常合适，可以在页面内挂载很多内容节点，平常组件的循环显示方向默认是往右边滑动，但是在循环数量为2时，循环显示方向就会呈现一左一右，对于部分强迫症客户来说体验感就不是很好，如下图。首先获取要循环的数据的长度length，如果为2时，复制一次，使其成为长度length为4的数组，然后将Carousel组件的indicators(下标显示器)多复制的给隐藏（原本长度为2，现在为4，就隐藏第3个和第4个)完整代码如下，可直接复制使用。
2024-10-15 15:00:50
1232
原创 Debug-027-el-tooltip组件的使用及注意事项
使用el-tooltip配合（3）（4）两个属性在el-tree中可以实现当某一层级字数过多，对名称有一个缩写，并且悬浮显示全部名称的效果，这里还配合使用了动态样式使用getWidth()方法。（5）Popover 和Tooltip 是有相似的属性的，你可以尝试把Popover的属性用在Tooltip上，说不定可以成功。这里我想说的是，当我们的表格中的某一列单元格的内容超级多的时候，肯定是需要设置show-overflow-tooltip实现鼠标悬浮显示全部信息的。这个组件使用起来也挺简单的，
2024-09-05 18:10:23
1646
原创 Debug-026-垂直水平居中实现方式（1）
* 图片向右平移自身的50%,向下80px平移自身的50%*/如果设置的x位移，那么参考的是自身的宽度；位移，那么参考的是自身的高度。/* 在 X 轴上倾斜 30 度，在 Y 轴上倾斜 -15 度 */（1）transform: translate(-100px, 80px);/* 将方块在 X 轴上缩放 2 倍，Y 轴上缩放 3 倍 */平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）补充：transform这个属性还是很强大的，可以支持元素的平移、旋转，放缩。
2024-09-03 11:47:37
367
原创 Debug-025-el-upload照片上传-编辑页回显照片并且支持再上传的实现方案（下）
这里只是要稍微调整一下代码，和新增有一点点区别，要控制好数据（变量）的更新和销毁，并且考虑更新isHasImageUrl的状态（有一点比较确定的是只有初次进来编辑页，如果有照片才显示el-image，一旦在编辑过程中删除或者替换过照片，之后就是显示的就全部是el-upload了，你可以细品一下，这里不赘述）这个思路其实是比方案二想到的要早，并且我其实知道这个思路是必然能行的，但是我还是最后没有办法了之后再去选择实现它，原因很简单，就是麻烦呗，如果能让el-upload直接回显上传过的图片，或者说。
2024-09-03 09:11:13
1531
2
原创 Debug-023-Document.createElement()的使用
对象的一些常用方法，并且补充了一些说明和示例。事件监听器，当用户选择文件后，执行箭头函数。方法，模拟用户点击文件输入元素，从而唤起文件选择界面。函数进行进一步处理，同时在控制台打印相关信息。用途举例：用这个来实现手动唤起文件上传入口。，然后将其隐藏并添加到。属性中获取第一个文件（元素，并设置其类型为。
2024-08-23 16:36:59
392
原创 Debug-022-el-upload照片上传-整体实现回顾(上)
前情概要：最近业务里通过el-upload实现一个上传图片的功能，有一些小小的心得分享给各位。一方面是review一下，毕竟实现了很多细小的功能，还有这么多属性、方法（钩子）和碰到的问题，感觉小有成就。另一方面，这个上传图片的功能比较少用，但是确实多数系统都有可能去做的一项功能，时间一久，很多钩子和属性非常容易遗忘，所以这里备份可以便于将来二次利用，温习一下，很多地方又可以直接去CV，也算是为以后提升效率考虑吧（虽然现在把这些在回顾一遍写下来真的超级麻烦，但还是应该有一些匠心精神吧，共勉共勉）。
2024-08-23 15:21:55
1572
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人