Ef8tzmZ1JY7K
随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。 组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等。 本文给大家介绍的一款组件是：自定义精美商品分类列表组件侧边栏商品分类组件c...
标题：基于uQRCode封装的Vue3二维码生成插件 摘要：本文介绍了一种基于uQRCode封装的Vue3二维码生成插件，可以在Javascript运行环境下生成二维码并返回图片地址。该插件适用于所有Javascript运行环境，并且支持微信小程序。本文将详细介绍该插件的使用方法，并给出一个基于Vue3的示例。 关键词：Vue3，uQRCode，二维码生成，Javascript，微信小程序 一、引言 随着移动互联网的普及，二维码已经成为了人们生活中不可或缺的一部分。在Web应用中，经常需要生成二维码来方便用户扫码。而Vue3作为目前最流行的前端框架之一，也需要一个方便易用的二维码生成插件。本文...
快速实现前端百度地图定位组件，显示地图定位，标记点，并显示详细地址;下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=12677 效果图如下： 代码如下： 百度地图定位组件，显示地图定位，标记点，并显示详细地址 使用方法 使用方法 安装vue-baidu-map插件 npminstallvue-baidu-map--save <baidu-mapclass="bm-view":center="centerPoint":zoom=10@ready="handler"> <...
快速实现多图片上传组件，支持单个文件，多个文件上传步骤条step使用;下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=12747 效果图如下: 使用方法 使用方法 //添加多张图片（少于6张）addPhotoClick(){uni.hideLoading();letmyThis=this;if(myThis.photoList.length>=6){myThis.photoList=[];}uni.chooseImage({count:6,sizeType:['compressed'],...
前端仿新浪新闻tabs选项卡tabs标签页，根据文字多少自适应tab项宽度, 下载完整代码请访问uni-app插件市场地址: https://ext.dcloud.net.cn/plugin?id=12876 效果图如下: 实现代码如下： 使用方法 使用方法 <!-v-model：选择序列tabs：选择数组myColor:下划线颜色spaceLeft:tabs间距height:设置高度@change:tabs切换事件--> <ccScrollTabsv-model="tabIndex":tabs="tabs"@cha...
前端vue可以左右滚动的切换的tabstabs选项卡滑动动画效果自动宽度, 下载完整代码请访问https://ext.dcloud.net.cn/plugin?id=13003 效果图如下: 使用方法 使用方法 swiperTabList:["2023-06-10","2023-06-11","2023-06-12","2023-06-13","2023-06-14","2023-06-15"],//导航列表 swiperTabIdx:0, swiperColor:'...
前端vue自定义简单实用下拉筛选下拉菜单, 下载完整代码请访问: https://ext.dcloud.net.cn/plugin?id=13020 效果图如下: 使用方法 使用方法 <!-titleArr:选择项数组dropArr:下拉项数组@finishDropClick:下拉筛选完成事件--> <ccDropDownMenu:titleArr="titleArr":dropArr="dropArr"@finishDropClick="finishClick"></ccDro...
前端vue仿京东天猫简单好用的瀑布流瀑布流式布局列表组件waterfall，下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13046效果图如下： 使用方法 <!-proList:条目数组数据goProDetail:条目点击事件跳转（实现了点击条目数据传值）--> <ccWaterListView:proList="projectList"@click="goProDetail"></ccWaterListView> HTML代码部分 <template> <...
前端vue单个文件上传支持图片，压缩包以及文件 ，下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13066 效果图如下： 使用方法 <!-photoList：选择的图片数组 @click：图片选择事件--> <ccChooseImgsView:photoList="photoList"@click="addPhotoClick"></ccChooseImgsView> addPhotoClick(){ uni.hideLoading(); letmyThi...
前端vue非常简单实用商品分类展示组件侧边商品分类组件 ，下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13084 效果图如下： 使用方法 <!-flist:第一级数组slist：第二级数组tlist：第三级数组@click：点击事件注意：下一级pid与上一级id对应关联--> <cc-categorizeView:flist="flist":slist="slist":tlist="tlist"@click="navToList"></cc-categorizeView&...
前端Vue图片上传组件支持单个文件多个文件上传自定义上传数量预览删除图片图片压缩，下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13099 效果图如下： 1.0.0（2023-06-18） 组件初始化 使用方法 <!-count：最大上传数量 imageList:图片上传选择数组--> <cc-imgPreDelUpload:count="6":imageList="imgList"></cc-imgPreDelUpload> <!-上传请求事件--> ...
前端Vue自定义顶部搜索框热门搜索历史搜索用于搜索跳转使用，下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13128 效果图如下： 自定义顶部搜索框用于搜索跳转使用方法 <!-自定义顶部搜索框用于搜索跳转skipUrl:跳转url为绝对路径/pages开头--> <cc-headSearchskipUrl="/pages/index/search"></cc-headSearch> HTML代码实现部分 <template> <viewclass="co...
前端Vue自定义简单好用商品分类列表组件侧边栏商品分类组件 ，下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13148 效果图如下： cc-defineCateList 使用方法 <!-data:商品列表数组[{navtitle:标题shop:[]展示列表}]@click:商品条目点击事件--> <cc-defineCateList:data="data"@click="cateItemClick"></cc-defineCateList> HTML代码实现部分...
前端Vue自定义简单实用轮播图封装组件快速实现轮播图，下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13153 效果图如下： cc-mySwiper 使用方法 <!-自定义轮播图swiperArr:轮播数组 @swiperItemClick:轮播图条目点击--> <cc-mySwiper:swiperArr="banner"@swiperItemClick="swiperItemClick"></cc-mySwiper> HTML代码实现部分 <templa...
前端Vue仿京东加入购物车弹框立即购买弹框shopDialog自定义弹框内容，下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13183 效果图如下： cc-shopDialog 使用方法 使用注意：该插件需引用cc-radioBtnBox插件和cc-numbox插件两个插件库 cc-radioBtnBox插件地址：https://ext.dcloud.net.cn/plugin?id=13176 cc-numbox插件地址：https://ext.dcloud.net.cn/plugin?id=13163 &...
前端Vue自定义发送短信验证码弹框popup实现剩余秒数计数重发短信验证码，请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13207 效果图如下： 实现代码如下: cc-codeDialog 使用方法 <!-show:是否显示弹框phone:手机号 autoCountdown:自动时间秒数len:短信验证码长度@closeClick:关闭弹框@confirmClick:确认事件--> <cc-codeDialog:show="show"phone="1900000000":autoCountdown=...
前端Vue基于腾讯地图Api实现的选择位置组件返回地址名称详细地址经纬度信息， 下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13310 效果图如下： 使用方法 <!-leftTitle:左边标题name：输入框名字value：输入框选择值 placeholder：占位符@click：点击事件--> <cc-locPickerleftTitle="收获地点"name="location":value="mapSelData.poiname"placeholder="请选择位...
前端Vue腾讯地图SDKApi经纬度解析为地址信息Geocoding可用于定位经纬度信息解析为地址， 下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13311 效果图如下： cc-tencentGeocoding 使用方法 //引入腾讯地图sdk importqqmapsdkfrom"../../utils/qqmap-wx-jssdk.min.js"; //地址反向编码解析地址 geocodingClick(e){ constQQMapWX=newqqmapsdk({ //腾讯地图 ...
前端Vue自定义精美宫格菜单按钮组件可设置一行展示个数可设置成九宫格十二宫格十五宫格，下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13315 效果图如下： cc-categoryMenu 使用方法 <viewclass="header">十五宫格菜单</view> <!-推荐宫格菜单rowNum：一行展示多少个categoryList：菜单数组menuClick：菜单点击--> <cc-categoryMenu:rowNum="5":categoryList="cat...
前端Vue一款基于canvas的精美商品海报生成组件根据个性化数据生成商品海报图长按保存图片，下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13326 效果图如下: cc-beautyPoster 使用方法 <!-posterData：海报数据--> <cc-beautyPoster:posterData="posterData"></cc-beautyPoster> <!-海报数据字段--> posterData:{ //用户姓名 name:'小明', ...