![](https://img-blog.csdnimg.cn/100a109259944e41b32f083c40cf17fe.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue项目-封装组件
文章平均质量分 93
在 Vue.js 项目中,封装组件是一种重要的实践,旨在提高代码的可重用性、维护性和可读性。封装组件包含:定义组件、Props 定义与传递、父子组件通讯、方法与生命周期钩子、数据封装等
DTcode7
专注于《前端开发》、《微信小程序》领域 ,同时WEB开发、小程序开发、AIGC、IT信息化等领域摸爬滚打多年,深谙网页js,上班摸鱼、自动化打工等领域。略懂的前端开发、数据库、油猴脚本、Vue等框架,具备一定实操经验。让学习成为一种习惯,与君共享,携手共进!
我没有把枪口对向妇孺,而是选择对向自己。紧紧握住的是人性中的野蛮,涌溅出的是精神之海的浊秽。风雨大作之后呆滞的眼神是我最后倔强。让我们把握住贤者时间疯狂学习,努力提升自己!
展开
-
引入阿里icon库的方法(font-class 引用)
另外,建议在使用阿里矢量图标库前仔细阅读相关文档和许可证,确保符合相关要求和规定。想要让全局都能使用这些图标,还需要在app.wxss文件中引入这个iconFont.wxss文件。下载阿里矢量图标库文件:可以从阿里官网或其他可靠来源下载阿里的矢量图标库文件,通常是以。解压缩文件:将下载的阿里矢量图标库文件解压缩到本地目录中,得到一系列图标文件(通常是。所以,在class中粘贴对应图标的类名,就能在页面中看到对应的图标了。选择自己想要的图标,添加到购物车,选择【添加至项目】是阿里矢量图标库中对应图标的类名。原创 2021-09-15 16:22:09 · 6801 阅读 · 1 评论 -
Vue+elementUI-table组件-多行合计行
此博客通过投机取巧的方法,将table中本来只有一行的合计行,制作成(伪)多行合计行效果之所以叫做(伪)多行合计行,是因为这个合计行实际上还是一行,只是通过样式改成了多行的模样~参考博客:elementui el-table 多行合计、插入标签_Nancy617的博客-CSDN博客https://blog.csdn.net/Nancy617/article/details/112309507elementUI官网样例:将show-summary设置为true就会在表格尾部展示合计行原创 2021-11-09 10:39:53 · 11421 阅读 · 16 评论 -
vue组件封装-tabBar底部导航栏
效果图:组件代码:<template> <!-- 自定义底部菜单栏===》模拟小程序菜单栏效果 --> <div class="tabbar"> <!-- 占位容器===》页面设置占位容器是为了抵消底部导航栏固定定位的高度。 --> <div class="placegolder-container"></div> <!-- 底部导航栏 --> <div cla.原创 2021-11-02 08:36:26 · 1166 阅读 · 0 评论 -
vue-封装tabs组件
之前有跟着黑马的b站教程封装了一个微信小程序的tabs组件微信小程序-tabs切换效果组件封装_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120436232现在用vue写网页,需要个性化封装一个tabs组件(虽然elementUI有tabs组件,但是不太满足当前业务需求,所以自己重新封装一个)组件:cjTabs.vue<template> <div> <!-- 顶部横原创 2021-11-01 18:06:14 · 3327 阅读 · 1 评论 -
tui-image-editor 图片编辑组件
针对图片的涂鸦、缩放、标注等操作,需要借助canvas来操作,这里借助tui-image-editor绘图组件来实现基础的涂鸦等功能可以参考一篇使用教程博客:快给你的Vue项目添加一个编辑图片组件吧_Senar的博客-CSDN博客_vue 图片编辑组件https://blog.csdn.net/i_am_a_sb/article/details/109944501里面介绍的很详细,不过我对自己要使用的情况做了一些个性化,并封装成一个组件,方便调用tui.image-editor-官方英文文档:.原创 2021-10-21 15:28:42 · 12616 阅读 · 23 评论 -
封装一个前端h5用来【下载文件】的方法-引入即用
封装函数是一种编程技巧,它允许开发者将一段特定的代码逻辑打包成一个独立的单元,以便在程序的其他地方重复使用。这样做的好处是可以减少代码冗余,提高代码的可读性和可维护性。以下是如何优雅地封装wx.requestrequestwx.requestresolverejectwx.login封装函数是提高开发效率和代码质量的有效手段。通过合理设计和使用封装函数,可以大大提升开发的效率和程序的稳定性。原创 2021-10-08 14:55:57 · 324 阅读 · 0 评论 -
vue引用阿里彩色图标(symbol引用)-封装自己的icon组件
关于如何引入彩色的阿里图标,请参考另一篇博客:vue引用阿里彩色图标(symbol引用)_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120322471接下来要封装出自己的icon组件,方便使用。第一步:在components文件中新建一个组件(我的叫cjIcon.vue)<template> <!-- symbol方式引用彩色图标,就得这么写 --> <!-- :clas原创 2021-09-16 11:14:39 · 681 阅读 · 0 评论