盼星星盼太阳

2025年3月6日

摘要：一、问题引入图片尺寸不固定，根据本身大小，增加黑色遮罩。方案：1.加上父元素，内容设置fit-content自适应，然后增加遮罩子元素定位；2.考虑直接css的filter滤镜直接实现二、filter属性 filter属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的阅读全文

posted @ 2025-03-06 13:54 盼星星盼太阳阅读(6) 评论(0) 推荐(0) 编辑

2025年2月14日

JS实现浏览器全屏F11

摘要：一、问题引入预览图片时自动全屏二、解决方案 document原生API获取全屏状态（document.fullscreen 已被弃用，可用document.fullscreenElement 只读属性返回当前页面中以全屏模式呈现的 Element，如果当前页面未使用全屏模式，则返回 null。）阅读全文

posted @ 2025-02-14 15:28 盼星星盼太阳阅读(30) 评论(0) 推荐(0) 编辑

2024年12月5日

防止浏览器记住密码

摘要：一、问题引入客户要求登录时，不能被浏览器截取记录密码二、问题分析问题的根源就在于浏览器会捕捉你的password的输入记录，以最后一次为节点进行存储。所以不管我们对password做什么处理，只要是password进行了输入，都会被拦截。三、解决方案使用css属性-webkit-text- 阅读全文

posted @ 2024-12-05 10:30 盼星星盼太阳阅读(42) 评论(0) 推荐(0) 编辑

2024年12月2日

前端开发本地搭建nginx服务相关操作

摘要：问题引入：前端本地开发，处理bug等，需要连接不同后端或者测试环境服务，前端切换vue.config文件，然后重启耗费较长时间解决方案：利用nginx代理，以及启动重载速度快，解决此问题 1.vue.config文件devServe代理修改为本地端口，例如代理本地8080端口 devServe 阅读全文

posted @ 2024-12-02 14:42 盼星星盼太阳阅读(26) 评论(0) 推荐(0) 编辑

2024年1月18日

前端长列表优化

摘要：一、场景引入长列表网页相信大多数开发者都遇到过，在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。因此我们会经常采用虚拟滚动、分页、上拉加载更多等不同的方式来进行优化，这些方式的思想都是一样的，都是只渲染可见区域，等用户需要时再加载更多的内容。二、解决方案 1.css属性 conte 阅读全文

posted @ 2024-01-18 11:25 盼星星盼太阳阅读(692) 评论(0) 推荐(0) 编辑

2024年1月12日

CSS实现文字滑动亮光效果

摘要：使用CSS属性，文字背景渐变，结合animation实现滑动亮光话不多说，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device 阅读全文

posted @ 2024-01-12 15:03 盼星星盼太阳阅读(118) 评论(0) 推荐(0) 编辑

2024年1月5日

前端导出文件 java.io.IOException: Connection reset by peer

摘要：一、场景后端生成zip压缩文件，前端直接导出。问题：文件小的时候正常导出，大的时候，接口收不到返回的文件流；本地测试没问题，部署线上有问题；二、原因分析后台打印日志，发现如下报错日志 java.io.IOException: Connection reset by peer 查阅得知，断开连阅读全文

posted @ 2024-01-05 13:59 盼星星盼太阳阅读(1060) 评论(0) 推荐(0) 编辑

2023年10月20日

CSS 实现鼠标悬浮边框线动画效果研究

摘要：一、transition CSS transition（过渡效果）详解 CSS 中提供了 5 个有关过渡的属性，如下所示： transition-property：设置元素中参与过渡的属性； transition-duration：设置元素过渡的持续时间； transition-timing-fun 阅读全文

posted @ 2023-10-20 16:18 盼星星盼太阳阅读(336) 评论(0) 推荐(0) 编辑

2023年10月13日

el-table表格行状态进度条

摘要：一、场景引入项目某些表格，需要展示每条数据不同进度状态，使用进度条来展示二、解决方案利用定时器+el-progress组件，列表数据需要返回数据总时间，计算得出进度代码如下： getTableData() { let _that = this; if (this.showLoading) { 阅读全文

posted @ 2023-10-13 14:03 盼星星盼太阳阅读(511) 评论(0) 推荐(0) 编辑

baidu Map地图遮罩

摘要：一、场景引入做地图轨迹时，轨迹连线不明显，需增加地图遮罩效果二、解决方案方案一、使用 Polygon 多边形定义一个阴影覆盖物，大小覆盖整个地图代码如下： // 添加遮罩 addMask() { var maskPoints = [] var EN_JW = new BMap.Point( 阅读全文

posted @ 2023-10-13 13:46 盼星星盼太阳阅读(380) 评论(0) 推荐(0) 编辑

盼星星盼太阳

公告

随笔分类

最新评论