- 博客(15)
- 收藏
- 关注
RSS订阅原创 vue3 v-model指令
v-model 是 Vue 提供的一个语法糖指令，用于在表单输入元素和组件上创建双向数据绑定。在表单元素中，v-model 会根据输入类型自动选择相应的方式来更新数据。
2025-04-08 10:36:59
342
原创 vite插件 unplugin-auto-import 自动导入API
插件可以自动导入API，它可以帮助开发者减少手动导入的重复代码，提高开发效率，并支持等常用库的自动导入。使用该插件无需手动写import语句，直接使用refreactiveonMounted等 Composition API，该插件还支持Pinia和 vue ruter 和axios等常用库，也支持自定义的函数。
2025-03-27 15:51:58
181
原创 pnpm 包管理工具
pnpm是一个速度快，节省磁盘空间的包管理器，全称是 “Performant NPM”，即高性能的 npm。它通过软链接和硬链接结合组织依赖的方式，大大节省了磁盘空间，提升了下载效率，同时解决了幻影依赖。
2025-03-19 20:00:00
1039
原创 ECharts地图下钻
是一种交互式的数据可视化技术，允许用户从较高层级的地理区域（如国家或省级）逐步深入到更精细的层级（如市、区或者县等），以便查看更详细的数据。用户可以点击某个省份，下钻到市级地图，再进一步下钻到区县级地图。
2025-02-06 12:03:40
371
原创 vue3 封装右键菜单组件
在页面中，我们通常会划分多个区域，右键点击不同的区域时展示不同的菜单。在这种情况下，需要在事件处理函数中阻止浏览器的默认右键菜单弹出。此外，如果区域内嵌套了其他区域，还需要阻止事件冒泡，确保事件只在当前区域内处理，从而避免影响到其他区域的右键菜单。defineExpose将变量、方法暴露出去，使得父组件能够访问这些暴露的内容。由于我们在 Vue 中封装组件，应当充分利用框架的优势，使用。由于不同区域需要显示不同的菜单项，因此该组件的菜单项由外部传入。在 Vue 中封装右键菜单组件时，可以通过。
2025-02-05 11:26:42
270
原创 判断对象上是否存在某个元素
下面通过 Object.defineProperties() 将a 和 b 设置为不可枚举 执行结果则会发生改变。使用Object.hasOwnProperty()， 判断对象自身是不是存在某个元素（不会查询原型链上的属性）使用Object.keys() 该方法返回的是一个数组，数组包含了对象自有的、可枚举的键。来检查属性是否存在。这种方法可能会有局限性，因为如果对象的属性值本身是。使用in操作符判断，in操作符可以查询到原型链上的属性。可以通过访问属性并判断其值是否为。
2024-12-25 14:12:54
355
原创 图片懒加载
懒加载也叫延迟加载，是一种根据用户的活动和导航模式来将某些资源的加载推迟到用户需要时的策略。通常来说，这些资源只有在滚动到可视区域时才会被加载。如果正确实现，这种资源加载的延迟对于用户体验是无缝的，并且可能有助于改善初始加载性能，包括可交互时间，因为页面开始工作所需的资源更少。
2024-12-16 15:50:02
342
原创 Vue3使用 i18n
如果遇到 ，在el-dropdown-menu 和 el-dialog 等一些组件中无法使用的情况，可能是因为作用于的问题或者组件渲染时机的问题。当把 i18n/index.ts中的 locale: 'zh'改为 locale: 'en', 可以看到语言切换成功。这是一个路由守卫的配置文件，主要是说一下 i18n 在ts文件中的使用方法，在。可以创建方法在标签语句中通过调用方法传值的方式实现。模板中使用，这个比较简单，直接使用全局方法。法来使用，下面的例子是在给网页标题设置。在main.ts中全局配置。
2024-11-20 17:42:50
733
原创 provide/inject 依赖注入
在 Vue 中，provide和inject主要用于父子组件之间的数据传递。provide让父组件提供数据，inject让子组件从父组件注入数据。接收两个参数：第一个参数是要注入的 key，可以是一个字符串或者一个 symbol，第二个参数是要注入的值。inject(key,defaultValue) 接收两个参数：第一个参数是注入的 key，第二个参数是可选的，即在没有匹配到 key 时使用的默认值。
2024-11-14 10:48:13
432
原创 兄弟组件以及跨组件传参——eventBus
本文介绍了如何使用 EventBus 在 Vue 3 中实现跨组件的通信。通过创建一个独立的事件总线，我们可以在无直接父子关系的组件之间传递数据，避免了传统的通过 props 或 Vuex 传递数据的复杂性。文章首先讲解了 EventBus 的基本概念和实现方式，随后提供了代码示例，展示如何在不同的组件中注册和触发事件，以及如何处理接收到的数据
2024-11-12 15:42:09
372
原创 仓库持久化——以vue3为例
在开发的过程当中我们会遇到仓库持久化的问题，今天给大家分享一下仓库持久化的基本用法和原理，状态管理库有两种一种是Vuex，一种是Pinia，两种都分享一下。仓库持久化有专门的插件可以使用，此篇文章没有采用插件，此文章以vue3为例,UI组件用的是Naive UI。
2024-10-31 14:30:17
278
原创 label:标记语句
提供带标识的语句，与 break 或 continue 语句一起使用。双层for循环时，可以使用标记语句在内层循环跳出外层循环。分享一个小知识，有疑问可以在评论区讨论。可以在任何标记语句中使用，而。在JavaScript 语句。可以在标记的循环语句中使用。
2024-07-10 11:28:01
243
原创 ColorThief调色盘 获取图片主题颜色改变页面的背景颜色
我在写demo的时候用了四张图片 排版成了一个四宫格的样式，鼠标分别凡在不同的图片时，可以看到页面的背景颜色发生了变化，当鼠标离开的时候可以将页面的背景颜色重置为白色。遍历四张图片，在img标签上添加鼠标移入、移出事件 style联内样式是设置选中的图片和未选中图片的透明度，四张图片是由。ColorThief用于获取图片的包含的颜色，可以用获取到的颜色用作页面的背景颜色或者其他用途。下载依赖 不同的包管理工具要使用不同的命令，我这里使用的是pnpm。上面这个事例供大家参考，有问题欢迎指出！
2024-05-30 17:53:49
585
原创 行内元素换行时的样式问题
将属性设置为slice时，就是上面的那种效果。元素被按照盒子被切割前的原始样式渲染，之后，针对每个行/列/页面将此假设框渲染成片段。行内块在换行的时候会有截断的效果，看起来效果不是很好，经过查看文档发现一个css属性可以弥补这个不完美。最近在写项目的时候遇到一个行内元素换行时的样式问题，写个demo给大家复现一下。将属性设置为clone时，每个框片段与指定的边框、填充和边距独立呈现。属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现。现在换行的位置会和开头的样式保持一致。
2024-05-09 17:35:00
222
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人