- 博客(22)
- 收藏
- 关注
RSS订阅原创 自定义滚动条样式：让滚动条成为设计的一部分
在CSS中，我们可以通过伪元素来定义滚动条的样式。：定义滚动条的整体部分。：定义滚动条轨道的样式。：定义滚动条滑块的样式。这些伪元素主要适用于基于WebKit内核的浏览器，如Chrome和Safari。虽然Firefox和Edge等浏览器也支持滚动条样式的自定义，但语法有所不同。为了保证兼容性，我们通常会优先使用WebKit的样式。滚动条的整体部分可以通过来定义。我们可以通过设置width和height属性来控制滚动条的尺寸。width: 6px;/* 横向滚动条的宽度 */
2025-04-02 11:30:42
646
原创 文件分片上传demo（ant design vue 的a-upload）
涵盖了文件分片的基本做法，具体接口要看前后端商议，这里的后端接口的要求基本也在注释标注，个人理解，文件分片是切割+合并，md5方法可以拿过去直接用，文件唯一性标识也可以根据项目而定。
2025-03-27 17:35:44
276
原创 在Vue3中使用Echarts的示例
这是一个环形图ts文件，效果如下，中间可放图片，内外圈颜色不一样，可设置题目。PS：与之对应的还有图表resize函数，详情见博客。
2025-03-18 15:17:38
379
原创 前端隐藏滚动条的多种方法及实现技巧
CSS 是最简单直接的方式，适合全局或静态场景；JavaScript 则提供了动态控制的能力；而 Vue 框架结合第三方库可以实现更复杂的滚动条样式和行为。在实际开发中，可以根据项目需求和个人喜好选择最适合的方法来隐藏滚动条。
2025-03-18 11:13:08
751
原创 实现动态滚动效果的 Vue 组件：一个实战案例
动态滚动效果常常被用于展示动态数据，例如新闻列表、报警信息或实时数据流。这种效果不仅能够节省页面空间，还能增强用户体验。本文将通过一个具体的 Vue 组件案例，详细介绍如何实现一个动态滚动效果，尤其是如何在用户交互时暂停和恢复滚动。
2025-03-18 10:59:57
305
原创 解决 ECharts 切换图表时的 Resize 问题
定义函数，通过setTimeout延迟调用当前图表实例的resize方法。这样可以确保在 DOM 元素完成更新后，图表能够正确获取到新的尺寸并重新渲染。// 清除之前的定时器，避免重复触发// 调用当前图表实例的 resize 方法}, 500);成功解决了 ECharts 在切换图表时无法正确触发resize方法的问题。自定义的函数通过延迟调用resize方法，确保了图表能够在 DOM 元素更新完成后正确获取新的尺寸并重新渲染。
2025-03-18 10:47:30
398
原创 echarts图表的轮播切换功能
需要在一个页面上展示多个环形图，并且这些环形图需要每隔几秒自动切换一次，以实现轮播效果。函数来定时触发图表的切换操作。每次切换时，更新当前显示的图表的标识符，从而触发。在组件挂载时，初始化每个环形图的数据，并确保切换到第一个图表时能够正确显示。我选择的是v-if，因为v-show有些占内存，页面不止一个组件。，因为它可以避免 DOM 的销毁和重建，从而减少闪烁问题。在组件销毁时，清理定时器，以避免内存泄漏等问题。使用 JavaScript 的。指令的更新，实现图表的切换。
2025-03-10 10:14:03
313
原创 yarn install 报错解决方案
问题描述yarn install 安装报错error Error: connect ETIMEDOUT 104.16.24.34:443 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)解决方案：1.yarn 版本问题卸载当前版本，安装指定版本npm uninstall -g yarnnpm install -g yarn@1.22.172.代理问题使用淘宝镜像网站yarn config set regi
2024-12-23 15:47:12
516
原创 JS基础-2024.12
一个完整的javascript实现应该由三部分构成：ecmajavascript ,dom,bom.ECMAScript是一个标准，而这个标准需要由各个厂商去实现。基本数据类型String：字符串，有的时候需要用一些转义字符\"表示 "\'表示 ’\n表示换行\t制表符\\表示\Number：数值NaN是一个特殊的数字，表示Not A Number，使用typeof（检查变量类型）检查一个NaN也会返回number。
2024-12-13 11:15:10
620
原创 HTML&CSS笔记
前端的三种语言：HTML(结构)，CSS(表现)，JavaScript(行为)告诉浏览器你写的是英文网站，到时候会弹出是否翻译，中文则为网页的三个部分结构HTML表现CSS行为JSCSS的定义方式将样式编写到style标签里，过css选择器为多个标签设置样式，并且只修改一次更方便对样式进行复用问题：只对一个网页起作用，里面的样式不能跨网页复用将css样式写到一个css文件里通过link链接外部css文件，写到外面可以触发浏览器的缓存机制，从而加快网页的加载速度。
2024-12-10 09:33:41
654
原创 尚品汇练习注意问题
理想效果：鼠标可以移入二级白色菜单实际效果：鼠标无法可以移入二级白色菜单，一脱离第一层的小li就无法显示第二级别原因：二级菜单代码放置位置不对。
2024-12-06 10:58:32
816
原创 Computed与watch
用途:使用属性不存在，需要通过已有属性获得（get和set）})get(){},})常用情况：由于v-if优先级高于v-for 而且二者不能同时使用。需要循环数组并在其中做筛选来显示的情况时，用computed</div>{id:1,name="项目一"},{id:2,name="项目二"}})})适用：所监视属性必须存在// 创建一个响应式的 message 变量// 使用 watch 监听 message 的变化。
2024-11-27 15:25:36
740
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人