- 博客(46)
- 收藏
- 关注
RSS订阅
原创 列表ul li前面的点如何更改颜色、形状、大小
如何更改li标签前的黑色圆点的形状、颜色和大小？我们平常都是这样写的： <ul> <li>111</li> <li>222</li> <li>333</li> </ul>效果：一、更改前面的黑色点的颜色（使用伪类） ：：marker通过添加样式，如下：ul li::marker{ color: red;
2021-06-19 15:37:52
42030
13
原创 前端开发效率翻倍！6 款 Chrome 神器插件推荐
它能让你在浏览器中直接查看组件树、Props、State、Hooks 状态，甚至实时编辑组件属性！FeHelper 是由国内开发者打造的一款全能型前端工具集合，支持 JSON 格式化、代码压缩/解压、正则表达式测试、二维码生成、时间戳转换、Base64 编解码等数十种实用功能。这款插件让你秒变 iPhone、iPad、Android、Mac、Windows，甚至模拟微信内置浏览器！它们或许不会让你写出更好的代码，但一定能让你写得更快、测得更准、看得更清。，轻量无干扰，却能帮你快速发现性能瓶颈。
2025-10-20 13:57:02
692
原创 前端已死？不，是前端正在“进化”——AI时代前端工程师的破局之道
AI正在重塑前端开发，但"前端已死"的说法过于悲观。AI工具虽能自动化实现基础功能，却推动前端工程师向更高价值转型：从编码转向需求分析、智能体验设计和全栈拓展。未来的核心竞争力在于与AI协作，将业务需求转化为AI可执行的指令，并融合AI能力创新交互体验。建议开发者掌握AI工具，提升系统设计能力，深耕专业领域。AI不会取代前端，而是淘汰不会使用AI的前端，关键在于主动进化，将重复工作交给AI，专注用户体验创新。
2025-10-17 11:03:23
391
原创 手把手教你用Vue3+TypeScript+Vite搭建后台管理系统
这套技术栈是 2024 年前端开发的主流选择，无论是个人项目、团队协作还是面试展示，都非常加分！
2025-09-05 17:17:54
473
原创 首屏加载从5秒到1秒，我是如何优化前端性能的（真实项目复盘）
这篇博客分享了Vue项目首屏加载从5.2秒优化到1秒内的实战经验。主要问题包括JS包过大、图片未压缩和缺乏缓存。通过代码分割、图片转WebP格式、开启Gzip压缩、CDN加速和预加载关键资源四步法，成功将首屏时间降至1秒内，用户留存率提升一倍。文章提供了具体代码示例和优化前后数据对比，强调性能优化对用户体验的关键作用。
2025-09-04 10:17:02
333
原创 解决在拼音输入法输入过程中按下 Enter 键时，浏览器会触发发送操作
浏览器在输入法输入时会触发 keyCode 229，作为输入法输入的标记，需与 isComposing 结合判断。当输入法处于候选选择或输入过程中，此属性为 true，表示当前输入属于输入法操作，需忽略发送逻辑。只在确定是普通 Enter 键时才调用，避免干扰输入法的正常换行逻辑。e.preventDefault() 的位置。
2025-05-28 11:42:00
396
原创 js实现监听Ctrl/Cmd+C复制、Ctrl/Cmd+Z撤销 等快捷键
使用document.addEventListener监听keydown事件即可：逐个条件详解：(e.ctrlKey || e.metaKey)e.ctrlKey: 表示用户是否按下了 Ctrl 键 。e.metaKey: 表示用户是否按下了 Meta 键 （在 Mac 上通常是 Command 键）。-这个条件的意思是：如果用户按的是 Windows/Linux 上的 Ctrl 键 ，或者 Mac 上的 Command 键 ，那么这个条件成立。📌 目的 ：让快捷键兼容所有操作系统。?
2025-05-26 14:24:49
649
原创 解决dnd-kit 拖拽变形
在使用 @dnd-kit 实现拖拽功能时，拖拽过程中组件变形的问题通常由样式冲突、父容器限制或拖拽状态管理不当引起。为解决这些问题，可以采取以下措施：首先，确保组件的样式不会与 @dnd-kit 动态添加的 transform 样式冲突，使用 transform 而非直接修改 top 和 left 属性。其次，父容器应使用 relative 或 absolute 布局，并设置明确的宽高以避免内容溢出。此外，利用 isDragging 状态动态调整组件样式，如透明度，并在拖拽结束时恢复默认样式。最后，通过隔离
2025-05-16 09:42:47
1297
原创 前端react中实现直接复制粘贴上传图片
参考：https://www.zhangxinxu.com/wordpress/2018/09/ajax-upload-image-from-clipboard。1.在浏览器随便复制一张图片。
2024-11-19 10:10:48
680
原创 修改select 下拉默认选中项的颜色
参考:https://blog.youkuaiyun.com/weixin_39907729/article/details/85273738。
2023-06-26 17:38:41
1803
原创 Select选择器内容为空白，placeholder不显示
解决方法：使用一个额外的选项作为占位符：您可以在下拉列表的选项中添加一个额外的选项，将其值设置为 null 或空字符串，并为其设置占位符文本。这样，用户在未选择其他选项之前，就会显示该占位符选项。
2023-06-25 17:11:06
2363
原创 （已解决坑）调试上wx.miniProgram.redirectTo/wx.redirectTo可以跳转，但是真机上不能
（已解决坑）调试上wx.miniProgram.redirectTo/wx.redirectTo可以跳转，但是真机上不能
2023-03-27 19:12:37
4442
1
原创 提交代码出现error Empty block statement no-empty，代码却没报错？
提交代码出现error Empty block statement no-empty，代码却没报错？
2022-12-01 20:02:32
1856
原创 yarn : 无法加载文件 D:\Enviroment\node-v16.14.0-win-x64\node_global\yarn.ps1，因为在此系统上禁止运行脚本。
已全局下载yarn后，查看yarn版本时报错，yarn --version。报错：解决：1.管理员身份运行vscode2.新建终端，输入： get-ExecutionPolicy，回车后显示：Restricted，表示禁止状态3.接下来输入： set-ExecutionPolicy RemoteSigned4.此时再输入 get-ExecutionPolicy ，回车后显示：RemoteSigned，即可成功查看yarn版本啦~！...
2022-03-31 17:43:18
1794
原创 vue3，ts,el-input的enter事件
当el-form只有一项内容时，按entere键会出现一些错误，我们可以在el-form加onSubmit，来阻止默认事件。return ()=>{<><el-form model={formData} onSubmit={(e: Event) => { handleEnter(e); }} > <el-form-item label="数量:" prop="num"> el-input v-model={data.num}
2022-03-30 16:44:36
2941
原创 img图片路径错误时，显示破图/图片裂开，如何处理？
img图片路径错误时，显示破图/图片裂开，如何处理？首先我们可以设置img的alt属性，当图片显示不出来的时候就会显示对应的文字，但是此时还会出现一张图片破裂，很不美观。如下：一、第一种方式：1.设置css样式img[src=''], img:not([src]) { opacity: 0; }2.路径出错时，把路径置空js写法:<img :src="scope.row.logoUrl" alt="logo" onError={{ this.src = ''}}
2022-03-25 15:59:15
16284
2
原创 object没有map属性，object对象转换成数组
当我们要用map来遍历对象的值时，发现对象上是没有map方法的，此时我们可以把对象转换成数组来进行遍历。 let obj = { 0: { name: 'hello' }, 1: { name: 'happy' }, }; obj.map((item)=>{ console.log(item); // 报错：Uncaught TypeError: obj.map is not a function })正确做法：将对象转换成数组
2022-03-17 14:23:56
1109
原创 文字下方下划线居中
实现如下绿色横线效果:html代码:<body> <div> <h1>今天天气真好</h1> </div></body>css代码:(使用伪类实现)h1{ text-align: center; } div:after{ display:block; content:""; width:80px; border-bottom:3px solid lightgreen; margin:0
2021-11-16 14:10:50
1168
2
原创 文字在同一行的最两边
比如要实现这个效果:html代码:<div class="wrap"> <div class="left">这是一件商品</div> <div class="right"><a href="#">查看更多></a></div></div>css代码:.wrap{ width:80%; height:200px; margin:0 auto; background:#eee; di
2021-10-13 18:05:46
340
原创 单行/多行文字超出显示省略号...css实现
1. 单行文本溢出显示为 …效果:代码:<view class="scrollItem"> <image src="../static/images/head.jpeg"></image> <text>今天写了这个小程序,用来开发一个音乐器</text></view>css样式实现:.scrollItem text { font-size: 24rpx; overflow: hidden;
2021-09-26 18:29:04
203
原创 vue报错TypeError: Cannot read property ‘end‘ of undefined
我的代码:computed: { handleTimestamp() { let endData = this.activityList[0].end }}报错信息如下:但是我打印 this.activityList时, 却是有值的.这里报错的原因是:页面一开始还没渲染数据, 此时的activityList还是空的, 在computed方法中, 获取它的值当然就获取不到了.解决方法:在方法的开头, 对activityList的长度进行判断,为空则不再继续执行, 不为
2021-08-17 17:34:51
273
原创 git拉取和推送总是需要输入密码,怎么修改?Enter passphrase for key ‘/Users/xxx/.ssh/id_rsa‘
git拉取和推送总是需要输入密码,怎么修改?小伙伴们, 有没有这个问题: git pull和git push 的时候总会提示输入密码?尝试了好几个方法, 终于找到可用的.即重新设置新的密码,密码为空,下次执行git操作就不用再输入密码了:1.输入 ssh-keygen -p2.弹出下列的内容, 这一步直接回车即可3.提示输入旧密码、新密码、确认新密码:这一步正确输入旧密码, 在输入新密码的时候直接回车即可.4.再次拉取, 就不会提示输入密码啦~参考: https://www.jia
2021-08-10 17:22:32
535
原创 安装npm国内淘宝镜像
用命令行安装npm国内淘宝镜像1.win+R 打开，输入cmd，进入终端2.输入：npm config set registry https://registry.npm.taobao.org如下图所示：3.输入：npm config get registry返回淘宝镜像路径即安装成功。
2021-05-16 17:42:25
255
原创 亲测可实现:使用flex布局实现div水平垂直居中
使用flex布局实现div水平垂直居中CSS3.0弹性布局：flex布局CSS3.0弹性布局：flex布局<body> <div class="parent"> <div class="center">123</div> </div></body>定义一个父div，类名为parent:.parent { display: flex; -webki
2021-04-16 20:33:44
705
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人