- 博客(39)
- 收藏
- 关注
RSS订阅原创 【echarts】指令监听响应式尺寸变化 resize()
本文介绍了如何通过自定义指令监听图表容器尺寸变化。主要内容包括：1）定义一个resize指令，使用ResizeObserver API监听DOM元素尺寸变化并执行回调；2）在组件销毁时自动停止观察以优化性能；3）将指令应用于图表容器，并在尺寸变化时调用图表resize方法重绘图表。该方案实现了响应式图表展示，确保图表能随容器尺寸变化自动适配。
2025-09-23 16:23:14
185
原创 【ECharts】v-show盒子宽度设置 100%， echarts渲染出来宽度100px
摘要：使用echarts时遇到两个问题：1) v-show控制显示时图表宽度异常缩小；2)需要随父元素自适应宽度。原因发现是v-show的display:none导致echarts获取不到容器宽度，默认使用100px。解决方法是在setOption前调用resize()方法，强制重绘图表尺寸。注意resize()必须放在setOption之前执行，否则会报错。正确调用顺序为：先resize()调整尺寸，再setOption更新数据。该方案有效解决了图表显示异常和自适应问题。
2025-09-23 14:05:27
368
原创 复刻elementUI的步骤条Steps
摘要：本文介绍了如何实现一个动态步骤条组件，通过flex布局和伪元素创建步骤间的虚线连接。关键点包括：1)使用ul>li和flex构建基础结构；2)用::after伪元素实现虚线；3)通过.active类控制已完成步骤样式；4)利用flex-basis、flex-grow和flex-shrink实现动态宽度调整，确保最后一个步骤固定宽度。最终效果支持可变步骤数量，并能自适应不同屏幕尺寸。（127字）
2025-09-01 15:35:03
423
原创 随手小记：插槽的使用步骤记录
摘要：本文介绍了Vue插槽的使用方法，包括子组件如何定义插槽（具名插槽和默认插槽）以及父组件如何引用插槽。子组件中使用<slot name="XXX">定义插槽位置，父组件通过<template #XXX>为插槽插入内容。示例展示了如何替换默认按钮或保留默认值，方便开发者快速应用这一功能。
2025-08-27 11:11:12
166
原创 组件化 websocket
本文介绍了一个WebSocket组件化解决方案，通过封装websocket.vue组件实现实时数据响应和代码复用。组件包含连接管理、自动重连(最大3次)、消息收发等核心功能，通过事件机制(@onMessage)传递服务器推送数据。使用方式简单，只需引入组件并监听消息事件即可。该设计有效减少了websocket相关代码的冗余，提供了稳定可靠的实时通信能力，适用于需要频繁建立websocket连接的场景。关键特性包括连接状态监控、错误处理和可配置的重连机制。
2025-06-13 15:57:42
407
原创 【随笔小记】复刻阿里云盘面包屑横向滚动条
让最后一项始终在屏幕内，无需每次手动滑动出来ps：若是封装的组件，这段就写在watch中，监听到数据变化时让最后一项滑动到视口内！
2024-08-14 11:40:10
398
原创 vue项目中如何使用iconfont
个人认为：在线引入的方式比较适合项目开发测试阶段，因为图标可能会有新增修改，使用在线引入的方式就不用每次UI小姐姐编辑了图标都要开发人员去下载；本地下载引入的方式适合在运行上线阶段，避免线上引入不稳定访问不了图标。
2024-05-23 16:23:39
3348
原创 video标签属性总结
导读：video标签在H5页面上是常用的播放视频的标签，有很多新属性，在这里总结一下，作video的日常熟悉和平时使用时的翻阅查询之用。视频格式有.mp4 .webm .ogg这几种格式的， 在浏览器上支持的最好的是.mp4所以推荐使用的视频播放源。
2024-05-23 14:52:07
7012
原创 【随笔小记】输入框 van-field的属性enterkeyhint
van-field 输入框常常用来做基础输入框使用，这次使用要在**软键盘上**点击按钮【发送】然后做逻辑处理，enterkeyhint属性可以将键盘上的回车/换行 键修改成其他显示项
2024-05-22 10:34:30
2474
原创 【随手小记】子组件更新props精简版
常规用法中，props的属性值value 在子组件中是只读的，要修改value的值只能在父组件中修改，首先在子组件中emit(事件名event，value值) 发送给父组件，然后在父组件监听到event，更新value或者其他逻辑处理，这里不做过多描述。导读：有时候我们只想要简单更新某个props属性值，也许是显示标志的布尔值，也许是标题title，这类只是单纯更新值的处理，写一遍传值-监听-更新就显得很冗长，这里记录一种精简版的更新props属性值的方法。这样父组件就不用再加监听函数了！
2024-05-15 14:35:26
432
原创 【随手小记】vue-router 路由跳转与History堆栈管理
学无止境，记录一下开发过程中，使用vue-router时遇到的路由跳转问题。
2024-04-25 14:19:37
1565
3
原创 AMap 高德地图的运用总结
记录高德地图的简单应用。包含 地图初始化，标记点位，添加点位图标，点位点击事件打开信息窗口 等等。ps:设置地图容器的宽高尺寸~
2024-04-19 11:10:53
2116
1
原创 JSX基础
JSX结合了html和js， 可以在js代码中编写HTML模板结构；return中原则上只能包含一个根节点。语法： on + 事件名称 = {事件处理函数} ,整体遵循驼峰命名法。识别js中的表达式，比如变量，函数调用，方法调用等表达式。列表渲染通过数组.map方法循环生成页面元素。传递自定义参数和 事件对象e。
2024-04-17 15:00:39
175
原创 搭建react开发环境
projectName 是你的项目名称，自定义一个。我这本地的node环境是 v20.10.0。快捷键 win+r，输入cmd 回车。运用脚手架快速搭建react开发环境。
2024-04-17 14:18:12
318
1
原创 【随手小记】border-image和border-radius 冤家路窄
随手小记：UI小姐姐很喜欢设计 带渐变的圆角边框框，but ，暴风哭泣：border-radius和border-image不能很好的合在一起，平平淡淡写一起会发现，只有渐变、没有圆角，变成直角了。
2024-03-22 16:54:56
1417
3
原创 websocket 入门只需五分钟
websocket 是一种采用socket 通信的连接，而不是http协议所以不受浏览器SOP的限制，是一种支持跨域访问的协议，客户端可以与任意服务器通信。
2024-03-14 10:44:41
1196
1
原创 【crypto-js】前端AES对称加解密
对称加密算法：DES或者AES算法，加密key和解密key用同一个。当model是ECB时，不需要设置偏移量iv，使用模式des/cbc/pkcs7或者其他模式 具体跟后端确认保持一致。
2024-03-12 10:08:10
1020
1
原创 【crypto-js】前端DES对称加解密
包含 “CBC”,“CFB”, “CTR”,“CTRGladman”,“OFB”, “ECB”，这些模式可以选择，那主要是看后端加解密的模式是咋样的，跟后端保持一致。包含8个API： “Hex”,“Latin1”,“Utf8”,“Utf16BE”, “Utf16”, “Utf16LE”,“Base64”,“Base64url”为了数据传输的安全可靠，常常在前端会将数据（明文）进行加密保护后，再传输给后端进行数据处理，在接收数据时往往也是密文接收，前端解密后进行数据呈现。跟后端加解密保持一致。
2024-03-11 16:44:42
1681
原创 【伪元素画三角形】自定义进度条
饿了么的进度条的样式不能满足设计时，我们需要对进度条进行改造，我这里需要给进度条加一个圆形按钮和进度条文本，并且跟随进度条比例移动。此篇文章用于记录实现过程和思路。：饿了么的进度条作为基础；自定义圆形按钮定位到进度条中，自定义进度条文本定位到 进度条上方，然后将定位的x方向的， 就能实现跟随进度条移动啦~
2024-03-07 11:33:28
490
原创 【插件html2canvas】页面元素生成图片
页面目标区域准备完毕，通过html2canvas将页面元素转换成图片base64，然后fetch请求图片，通过.blob()创建一个剪贴项，最后写入到系统剪切板。
2024-03-06 11:58:18
855
原创 【插件vue-clipboard2】复制文本
一个小插件【vue-clipboard2】，在vue项目中，有场景是需要点击按钮，使用这个插件可以轻松复制信息到剪切板中。
2024-03-06 10:15:37
873
原创 input六位验证码，输入自动跳到下一格，删除自动回退到上一格
做桌面应用时页面要求输入六位验证码进行验证，UI设计出来是6个独立格子要求输入数字和字母，当用户输入数字/字母，光标自动跳到下一格，删除时光标要退回上一格。卑微前端提出验证码换成横线输入，结果惨败，好吧确实格子好看…555，开始研究光标定位。
2024-03-05 13:48:08
2715
2
原创 【报错】Module not found: Error: Can‘t resolve ‘sass-loader‘ in ‘XXXX’
vue项目中使用sass写样式、需要安装插件。然后执行 安装命令 npm i 报错！
2024-03-05 10:34:11
862
原创 常见CSS样式问题
具体的占位数量由最多列数的个数决定的，例如这个布局最多7列，那我们可以使用7个空白标签进行填充占位；元素宽度和margin大小设置得和.list列表元素一样即可，其他样式都不需要写，由于。每项右边距间隔20px，怎么将每一行的最后一个box的margin去除呢？在flex弹性盒子布局的时候，这个效果 无效-盒子根据内容宽度自动会撑开盒子。Grid布局更灵活多样，有复杂的布局，flex不够用的情况可以使用。元素高度为0，因此，并不会影响垂直方向上的布局呈现。//内容盒子，一般是放数据内容的盒子。
2023-09-01 16:14:37
196
1
原创 【echarts相关】
饼图的文本默认定位不满足需求，现在要将文本定位到指定的位置。比如有两个label，要垂直居中，一个在饼图的上方，一个在饼图的下方。在5.0或更早版本的echarts的饼形图，文本颜色默认是黑色（与color数组中的颜色不一样了…现在要设置label颜色不相同，修改label下面的color值但是所有label颜色都是一样。饼图是通过**center[‘50%’,‘50%’]**来定位的；饼图没有表格grid，无法通过top/left/bottom/right定位；要设置不同的label有不同的颜色。...
2022-07-30 22:12:06
518
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人