![](https://img-blog.csdnimg.cn/3c279f6274c64c71984092c23d6fded8.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
文章平均质量分 89
构建用户界面的渐进式框架
南木元元
一位前端小菜鸟,梦想是成为全干工程师,欢迎大家交流,一起进步(互关私信)
展开
-
vue3+vite项目中封装并使用svg图标
vue3+vite项目中封装并使用svg图标。项目中有很多地方需要用到svg图标,Element Plus 组件库提供了一套常用的图标,但是往往不能满足需求,而网上比较全的就是阿里图标库,本文就来介绍下如何将阿里图标库中的svg引入到自己的项目中。本文的项目使用vue3+vite来构建,可以使用第三方的vite-plugin-svg-icons插件,来引入svg图标。原创 2023-05-09 19:43:20 · 3116 阅读 · 22 评论 -
Vue3实现图片懒加载及自定义懒加载指令
图片懒加载是一种常见性能优化的方式,它只去加载可视区域图片,而不是在网页加载完毕后就立即加载所有图片,能减少很多不必要的请求,极大的提升用户体验。图片懒加载的实现原理:在图片没进入可视区域的时候,只需要让 img 标签的 src 属性指向一张默认图片,在它进入可视区后,再替换它的 src 指向真实图片地址即可。本文就分享一下在vue3中实现图片懒加载的几种方式,包括使用插件以及自定义v-lazy指令。原创 2023-08-12 16:56:48 · 7490 阅读 · 109 评论 -
【Vue】实现页面截图、保存图片功能
vue中实现页面截图、图片保存。html2canvas库允许我们直接在浏览器上拍摄网页或部分网页的“屏幕截图”,即浏览器实现截图的功能。原理屏幕截图是基于DOM的。其基本原理就是读取已经渲染好的DOM元素的结构和样式信息,然后基于这些信息去构建截图,呈现在canvas画布中。原创 2021-11-19 20:50:08 · 6971 阅读 · 12 评论 -
vue自定义v-drag指令实现鼠标拖拽
使用自定义指令v-drag实现鼠标拖拽功能。鼠标按下时获取获取鼠标在元素上的位置,每次移动时不断计算和设置元素左上顶点坐标位置,并且在鼠标松开时要禁用掉down的监听事件,否则会一直执行。知道了鼠标的相对位置,后续的鼠标移动,只要知道移动后的鼠标坐标,就能很容易的把当前位置元素的左上顶点坐标算出来。在组件中使用directives注册一个自定义拖拽指令v-drag,在想要拖动的元素上使用“v-drag”即可。原创 2021-11-19 21:13:16 · 2572 阅读 · 10 评论 -
【Vue】实现文件下载,导出Excel表格
vue实现文件下载。最近项目遇到一个需求,每次都需要根据检索条件将后端请求到的数据在前端进行表格的动态生成展示,并能够点击按钮,实现文件的下载功能,导出为Excel表格。文件下载功能通过向后端发送特定的请求参数来获取相应文件,使用ResponseType Blob来实现文件下载。创建一个a标签,并设置其href属性为一个包含Blob对象的URL,然后模拟用户点击该链接的行为,就可以触发文件下载功能了。原创 2021-11-19 21:01:49 · 3640 阅读 · 5 评论 -
vue中集成cesium和threejs
参考依据是威尔逊等将Three.js与Cesium集成的文章,链接地址:https://www.cesium.com/blog/2017/10/23/integrating-cesium-with-threejs/注意,threejs和ceiusm结合会有版本问题,具体可以参考https://blog.csdn.net/u011540323/article/details/103522075。通过在两个场景中复制cesium的球面坐标系和匹配的数字地球,很容易将两个单独的渲染引擎层整合到一个主场景中。原创 2021-12-07 10:16:58 · 3022 阅读 · 10 评论 -
vue常用组件通信方式及vue2和vue3写法对比
本文结合vue2和vue3写法对比,总结了vue中组件通信常用的几种方式。父子组件:props / $emit、 ref / $parent隔代组件:provide / inject、eventBus、Vuex / Pinia兄弟组件:eventBus、Vuex / Pinia写作不易,你的一赞一评,就是我前行的最大动力。如有问题,欢迎指出!原创 2023-05-19 23:00:20 · 1531 阅读 · 29 评论