- 博客(48)
- 收藏
- 关注
RSS订阅原创 success动态效果（含动态背景）
摘要：代码实现了一个动态成功效果，包含背景缓慢展开和中心图标延迟放大动画。背景采用圆形容器，通过CSS动画"backgroundExpand"实现扩散效果；中心图标使用"imageScale"动画，延迟0.5秒后从0缩放到完整大小并淡入。该效果通过transition和animation结合实现平滑过渡，只需更换背景色和内容即可复用为错误或删除状态提示。核心原理是利用CSS动画的时间差创造层次感视觉效果。
2025-10-10 11:20:31
191
原创 svg图标通过color 属性改变颜色
SVG图标动态变色实现方案：通过CSS的currentColor和遮罩技术，将SVG作为遮罩层应用在纯色背景上。关键代码使用mask和webkitMask属性确保跨浏览器兼容，通过父元素文字颜色变化自动改变图标颜色。优势包括：仅需单色SVG文件、完美适配任意颜色变化、保持矢量特性缩放清晰、比img标签更灵活可控。该方案特别适合需要跟随主题色变化的图标场景，大幅减少资源文件数量。
2025-10-09 16:53:08
229
原创 回退到上一个提交的命令
Git撤销提交的常用命令汇总：1.软回退(git reset --soft)保留更改到暂存区；2.混合回退(默认)保留更改到工作区；3.硬回退(--hard)彻底删除提交和更改；4.可指定提交哈希回退；5.推送后需强制推送(--force-with-lease)。建议优先使用--soft方式，既能撤销提交又保留修改内容，操作更安全。
2025-09-29 14:37:58
318
原创 不同网站不同设备favisons各尺寸适应
本文介绍了如何为网站添加适配多尺寸设备的favicon图标。首先通过favicon-generator.org网站生成各种尺寸的图标文件，将所有文件放入favicons目录。然后在_document.tsx文件的head部分添加对应的link标签，包括不同尺寸的苹果设备图标、安卓图标和标准favicon。最后通过浏览器检查图标是否正常显示。整个流程确保了网站在不同设备和浏览器上都能正确显示适配的网站图标。
2025-09-28 16:12:37
299
原创 下载的文字文件自定义文字类型
本文介绍了如何在项目中自定义字体并应用。主要步骤包括：1）下载所需字体文件并放入public/fonts目录；2）在globals.css中使用@font-face定义SK Modernist及其加粗版本；3）通过CSS变量设置字体族变量，将自定义字体与默认Inter字体建立备用关系；4）在需要时通过CSS变量调用特定字体。文中配有操作截图，展示了字体定义和实际应用效果对比，提供了完整的字体导入和使用解决方案。
2025-09-28 11:09:30
182
原创 添加二维码并在二维码中间放置logo
这段代码实现了一个带中心Logo的二维码组件。使用React和Tailwind CSS构建，主要特点包括：1) 绿色半透明圆角背景框；2) 深绿色二维码；3) 中心嵌入圆形Logo（带白色边框）；4) 高纠错级别(Q)。二维码值为固定测试值"0x1234567890"，Logo使用了LEGO图片。整体布局采用flex居中，视觉效果清晰美观。
2025-08-14 14:16:52
233
原创 回退已commit的内容&&历史遗留的格式问题导致git commit 报错
1、当原代码中有很多不影响功能的历史遗留的格式问题导致git commit 报错，不需要每个都单独解决报错问题，如下所示，在commmit后面加上这个命令即可。2、回退已commit的内容。
2024-05-17 17:12:53
330
原创 根据特定条件在列表中加一列操作，符合此条件时此列才会展示
我们想要列表中有一列数据在A环境打开是显示的，在B环境打开则不显示，这里B环境表示为默认环境。
2024-05-13 10:09:18
219
原创 字符串取第一个空格之后的所有的值&&字符串取第一个空格之后的第二个元素的值，不要后面的值
当我们后端返回值可能存在某些特定的值或标识导致返回数据不固定且是空格分割时，我们想取出返回字符串中的某个值，就可以参考下面对这个字符串进行操作提取，当然，如果是别的符号分割开的把下面的空格替换即可。
2024-05-13 09:57:22
547
原创 给A组件列表添加勾选框在B组件进行删除修改操作
首先找到两个组件共同的父组件，在父组件中创建中间方法，并在两个组件中分别添加取值和传值操作。此时操作组件Filter通过this.props.orderIds可以取得被勾选中的ids。勾选列表组件Prescribed中勾选函数中添加回调将id传给父组件。首先看有没有引入Table组件。设置勾选框的样式及清除bug。state中添加属性及方法。首先看有没有引入组件。给下拉框按钮添加样式。
2023-09-28 14:56:27
231
原创 回退已commit的内容
git log查找commit提交的版本号git reset --soft 3f5529cdd1ef78be72f6c495bf639dc7343bff5c 其中–后面是版本号对回退的代码修改之后push可能会报错，解决办法：在后面加个 -f
2023-09-28 14:05:24
146
原创 在A分支开发过程中想暂停A已经修改的部分，切换到B分支去修改一些东西
在A分支开发过程中想修改一些B分支的东西，由于A分支做了修改未提交，所以直接git切换会失败此时需要先在A分支用 *git stash*命令把开发中的代码存储起来，切换到B分支进行修改，修改完成后再切换回A分支，用*git stash pop*命令将之前存储起来的修改弹出来就可以啦。
2023-07-04 14:49:48
199
原创 无限键盘突然失效
我搜的网上很多说用Fn+W键，有的键盘是没有Fn键的。首先检查下，是不是只有数字键盘被锁了，按NumLock键再检查功能组合键有没有效果，例如win+tab，如果有反应但按其他输入键没反应，那就是键盘被锁了，按win+空格键打开
2023-06-26 17:23:06
203
原创 select 组件添加模糊搜索功能&解决showSearch不生效问题
Select组件中 添加 showSearch 属性可以实现搜索功能，但是这个搜索是搜的Select的value值的,但是value值在页面上是看不到的。可以给列表先创建几个虚拟数值，来验证添加的showSearch是否生效。
2023-06-26 17:11:07
960
原创 在echarts图形遮罩层的最外层加一个结构不显示，如搜索框，被遮罩层覆盖导致
在echarts图形遮罩层的最外层加一个结构不显示，如搜索框，被遮罩层覆盖导致
2022-06-29 10:37:24
588
原创 根据变化值动态设置样式，如表格每列的宽度
假设你表格的列数是根据返回列表的数量控制的，需要每列都一样宽，那么每列的宽度就不能写死，需要一个动态的值来控制宽度，我们不能直接在样式中将宽度除以返回值的length，可以将这个结果先在computed中计算出来，页面中直接调用即可computed:{ // 根据组的数量变化宽度，这里的方法名表示为动态宽度 groupWidth(){ const style = {} //这里90是表格内容部分占整个表格的90%，前面的序号占据10%，这里保留了一位小数 style.width =
2022-05-19 10:43:58
646
原创 根据数组每个对象的某数值进行排序，如数量或者id
原数组为：Arr =[ {id:1,name:张三,num:100}, {id:2,name:李四,num:200}, {id:3,name:王五,num:500}, {id:4,name:赵六,num:300}]取得对象Arr后，在methods中加入此方法，不需要方法名和其余调用 代入num和Arr即可，这样得到的Arr就是排好序的// 对数组对象中的各对象中的num进行排序function objectSort(num) { // 比较函数通过num属性获得对象的平均分进行比较
2022-05-16 11:24:22
828
原创 laydate将选择的时间强制控制在当前周的某一天
由于要发布定时任务，所以传递给后端的日期只能是周一，由于laydate本身不能强制将其他的都禁用，查看了其他博主的文章需要引入layui太麻烦，这里将用户选择的非周一的日期强制转换为周一。/* 日期选择控件 */ laydate({ elem: vm.$refs[elName], istime: true, //min: minDate, format: 'YYYY-MM-DD', choose: function (datas) { vm.item[elName] = ''
2022-03-11 18:35:07
1263
原创 通过_blank打开的页面完成执行后，自动回到原页面，close关闭此页面
在A页面设置了一个按钮，点击后通过target="_blank"跳转到B页面，然后想要在B页面点击提交或者返回的时候回到原来的页面，代码如下： //A页面 <a class="iconfont font_do" title="填写问卷" :href="'./question.html?id='+item.id" target="_blank" ></a>//B页面 // 教师查看回答后返回goBack:function () { setTime
2022-03-03 10:10:48
877
原创 js sort方法根据数组中对象的某一个属性值将数组进行排序，如成绩排序
当我们需要从后端直接获取或者处理过的数组对象根据某属性进行排序时，使用sort方法可以直接实现根据列表中成绩对数组进行排序score为比较的值，这里是成绩，也可以是年龄age、数量num等等obj1、obj2这里可看做新定义的一个变量数组，直接用即可 不需定义 不代表任何数据scoreArr 为需要排序的数组function objectSort(score) { // 比较函数通过score属性获得对象的成绩进行比较，将**比较函数**作为函数返回值返回给sort return fun
2022-01-10 16:45:59
1356
2
原创 点击某行的操作栏中的禁用操作，并且自定义提示信息，确认后调用接口
当我们不需要勾选某行列表而是直接在操作栏进行禁用操作时，首先在操作栏中添加禁用按钮，给按钮绑定点击事件，将整行的信息传递进去// 这里的item是列表遍历v-for="item in list"得到的整行信息// state == 1表示启用状态<a v-if="item.state == 1" class="iconfont font_do" href="javascript:;" title="禁用" @click="close(item)">⊗</a>
2021-12-24 10:11:40
279
原创 出现在ready中的列表数据不随动态参数变化
当出现在ready中的列表数据不随动态参数变化时，可考虑watch监听动态变化的值或者再次调用ready[一般不推荐动ready]，也可将ready中的逻辑转移到一个新建方法如 init() 中，再在ready中调用这个方法即可，在数据改变的地方添加@change事件。这里注意ready可能会一直调用，所以一定要在前面将被赋值的列表定义为空，以免数据重复赋值。...
2021-12-24 09:50:10
362
原创 前端发起接口请求时报错：405 Method Not Allowed
当我们发起请求后，发现报错405，用调试工具查看根本没有发出请求，405就是接口不存在。这里首先排除下是不是接口名写错了，其次询问后端这个接口有没有同步再然后可能是HTTP调用方法错误，比如：定义的API是GET方法，通过POST方法（非GET方法）调用，就会返回这个错误。...
2021-12-24 09:18:33
31776
原创 从数组对象中抓取指定的对象属性值、将对象id存到ids中，并返回新数组对象列表
我们从后端获取res后得到的是整体的数组对象列表，但是有时会有需要其中一项或几项对象来作为接口参数数组或者展示列表，只需要其中几项属性，就可以通过map方法进行筛选得到需要的值oldList=[ {id=1,name]...
2021-12-22 09:32:10
1020
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人