- 博客(32)
- 收藏
- 关注
RSS订阅原创 Vue3中的Icon处理方案（包括将svg转化为Icon）
在前端项目开发中，SVG（可缩放矢量图形）凭借其无损缩放、体积小、可编辑性强等诸多优势，成为了处理图标（Icon）的热门选择。本文将为大家详细介绍几种在项目中处理 SVG 图作为 Icon 的有效方法。
2025-03-31 18:06:33
318
原创 VScode-i18n-ally-Vue
参考这篇文章，做Vue项目的国际化配置，本篇文章主要解释，下载了i18n之后，该如何对Vscode进行配置。
2025-03-27 10:42:19
464
原创 Vue3项目中的.vscode文件夹
vscode文件夹主要用于存放与 Visual Studio Code（VS Code）编辑器相关的项目配置文件，这些文件能让项目在 VS Code 里的开发体验更加个性化和高效。
2025-03-26 13:07:45
1122
原创 微应用-qiankun+vite+vue3
上面的代码示例中，主、子应用 Vue3+VueRouter4 ，在主应用内加载子应后，来回切换子应的路由，会不停的创建与卸载子应用。本示例中，基座为Vue3，子应用也是Vue3，由于qiankun不支持Vite构建的项目，这里还要引入。以自动注册微应用的实例为基础，我们无需变更子应用，只需要对路由以及子应用对应的页面组件做相应调整即可。中有记录这个问题，这个问题目前还没有解决，路由表追加meta，存储子应用相关信息。本文以手动加载的方式来解决上面的问题。在此页面组件内添加手动加载子应用的逻辑。
2025-01-21 15:21:23
521
原创 在Scss中使用Vue3组件内定义的变量
以往我们通常会通过 :style={} 与 :class={}的方式来解决，这种情况往往会导致增加额外变量或者额外的样式类，此时我们在想，那逻辑内使用的变量是否可以直接使用在样式表中，答案也是可定的。存在一些业务场景，期望有些样式属性是以变量的形式存在的，当变量发生变化时，页面的样式根据变量变化。我们可以使用变量、以及计算属性等完成上述需求。
2025-01-08 17:50:02
336
原创 将iconfont项目资源下载引入Vue3项目内
登录iconfont首页，点击资源管理，选中我的项目，页面将跳转至我的项目页。点击页面中的创建项目图标，页面出现新建项目弹窗，按照示例输入项目名称与项目描述，填写icon前缀，点击确定按钮后就完成了一个项目的创建。
2024-12-16 16:00:56
324
原创 Vue3-第三方组件的二次封装
在开发过程中，我们时常需要对某些组件进行定制化调整，同时希望能够保留并继承第三方组件库的全部属性。然而，在二次封装的组件中逐一定义第三方组件库的参数内容，不仅工作量大，而且部分方法可能在实际应用中并不需要使用。那么，如何实现这一功能呢？useAttrsAPI 提供了一个解决方案，它能够在setup函数中便捷地获取组件的所有属性。利用这一特性，我们可以极大地简化二次封装组件的过程。以下是一个具体的案例，展示了如何使用useAttrs对 Element Plus 的按钮组件进行二次封装。
2024-12-10 16:03:32
531
原创 WebSocket
WebSocket广泛应用于需要实时双向通信的场景，如聊天室、实时通知系统等。在这些场景中，服务器需要主动向客户端推送数据，而客户端也需要及时向服务器发送数据。传统的HTTP协议无法实现这种实时双向通信，而WebSocket协议则能够很好地满足这些需求。
2024-12-09 13:42:48
255
原创 防抖函数
当输入框中的内容发生变更时，需即时触发网络请求。然而，若不对输入框进行防抖处理，则可能在极短时间内引发大量接口请求的发送。为规避此类情况的发生，实施防抖机制显得尤为必要。在引入防抖逻辑之后，即便输入框内容持续变动，亦能确保在特定时段内仅执行一次查询操作。以下，我们将详细阐述防抖的具体实现方式及其应用场景。
2024-12-09 11:21:45
143
原创 D3.js与SVG渐变：长方形颜色随百分比变化
为了直观地展示这一效果，我们准备了一幅效果图，通过该图可以清晰地看到不同数值对应的矩形颜色渲染范围。同时，在下文中，我们将详细阐述具体的实现步骤，包括如何利用D3.js和SVG技术，根据数值大小来动态调整矩形内的颜色填充范围。具体而言，数值的大小决定了颜色在矩形内的填充范围，数值越大，颜色填充的区域就越广。不同于常规的颜色填充方式，这里的颜色并非覆盖整个矩形元素，而是。：每个矩形元素均拥有一个独一无二的ID，这一特性确保了我们在处理多个矩形时，能够准确无误地定位到每一个具体的矩形元素。
2024-12-06 17:05:06
172
原创 Vue3 + AntV X6 拖拽组件 Demo
本示例基于Vue3框架与AntV X6图形库所构建，旨在展示一个可向画布区域拖拽组件的演示实例。为提升该实例的可复用性和模块化程度，我们精心封装了一系列相关的hooks（即钩子函数）。通过实施双向数据绑定的策略，本实例不仅支持用户凭借手动操作直接修改画布上的组件元素，还具备通过数据驱动方式动态调整组件状态的能力。在具体实现过程中，我们亦详尽备注了若干使用过程中需关注的要点，诸如滚动画布时可能产生的冲突项、小地图功能失效等潜在问题。：用户可以通过按住CTRL键并结合鼠标操作，实现画布上组件元素的多选功能；
2024-11-29 13:23:50
728
原创 Vue3 + Moveable + Selecto 拖拽组件 Demo
本demo旨在通过Vue 3、Moveable和Selecto三个库的结合，实现一个基本的拖拽组件功能。通过Selecto实现元素的选择功能，通过Moveable控制选中元素的大小和位置。同时，封装了hooks以实现元素与数据之间的绑定，使得操作更加灵活和可维护。
2024-11-27 14:38:15
1085
1
原创 Three.js纹理贴图与UV坐标
文理贴图就是通过一个加载器，使图片变成模型材质颜色贴图。实现这个功能的加载器叫做纹理贴图加载器纹理对象Texture可以作为模型材质颜色贴图.map属性的值。1、使用为例贴图就无需额外设置材料的颜色2、最新版本webgl渲染器默认编码方式变了，为了避免色差，纹理对象编码方式要修改为。
2024-11-14 17:06:15
731
1
原创 Tree.js缓冲类型几何体BufferGeometry
BufferGeometry是一个没有任何形状的空几何体，可以通过BufferGeometry自定义任何几何形状，换句话说就是定义顶点数据。
2024-11-12 14:19:46
281
原创 d3+Vue将svg上的某一个元素居中放大
前提：svg图上每一个元素都有一个唯一id，通过唯一id来获取目标元素，通过d3将获取到的目标元素同时借助d3的放缩行为将目标元素放大居中在可视区域内。通过d3渲染一张svg图并通过给其添加放缩行为，借助放缩行为来控制目标元素的位置与大小。
2024-11-04 17:02:12
243
原创 开发经验积累
这种情况可能是接收元素禁止拖拽元素的放置，此时给放置元素添加event.preventDefault();语句就可以处理响应问题。
2024-02-19 10:47:40
1127
1
原创 键盘控制ElementPlus树形控件展开收起选中功能
通过上下键来选中数据节点时，只有canFocus为true的节点才能被选中。1、当树形控件获取焦点后，可通过键盘上下键来选中节点。2、当存在子节点时，键盘左键展开树，键盘右键收起树。
2023-05-08 19:18:36
1056
2
原创 Vue3路由缓存模式下的onActivated与onDeactivated
在使用keep-alive时，只有初次加载组件才会执行onMounted，但是有些情况下，比如页面切换时，当切换到指定页面或离开指定页面时，需要更新部分内容。当组件销毁时会执行onUnmounted与onDeactivated，当从别的页面切回指定页面时，只有onDeactivated会被触发。当组件初次加载时会执行onMounted与onActivated，当从别的页面切回指定页面时，只有onActivated会被触发。有时候我们在切换路由时不希望组件更新，希望组件可以缓存下来，维持当前的状态。
2023-04-19 15:59:54
6555
1
原创 Angular+PrimeNG table显示指定页内容
分页可根据first的对应值跳转table的指定页码下。在html定义对应属性以及方法。给p-table配置一下属性。
2023-04-13 14:03:46
438
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人