前端Vue组件化实践:打造仿京东天猫商品属性选择器组件
在前端开发领域,随着业务需求的日益复杂和技术的不断进步,传统的整体式应用开发模式已逐渐显得捉襟见肘。面对日益庞大的系统,每次微小的功能修改或增加都可能导致整个逻辑结构的重构,形成牵一发而动全身的困境。为了解决这一问题,组件化开发成为前端开发者的共同选择。
组件化开发的核心思想是将复杂的系统拆分成多个独立、可复用的组件,每个组件负责处理特定的业务逻辑或界面展示。这种开发方式不仅提高了开发效率,降低了维护成本,还使得系统的扩展和重构变得更加容易。
对于业务场景复杂的前端应用,以及经过多次迭代的产品,组件化开发更是必经之路。它不仅仅是简单的模块拆分解耦,背后还涉及到一系列的策略、交互方式和构建系统等工作。
在本文中,我将为大家介绍一个Vue框架下的自定义组件——仿京东天猫商品属性选择器组件。这个组件能够帮助我们快速实现商品属性的选择功能,提高开发效率。
一、组件功能与设计
该组件的主要功能是展示商品属性,并允许用户通过单选按钮的方式选择属性。它接收两个属性作为输入:attrArr用于传递属性数据,selIndexArr用于设置默认选中的属性序列。当用户选择属性时,组件会触发一个click事件,并返回用户选择的属性序列数组。
在设计上,我们参考了京东和天猫等电商平台的商品属性选择器,力求实现一个既美观又实用的组件。单选按钮的布局和样式都进行了精心调整,以适应不同的业务场景和界面风格。
效果图如下:




二、组件实现
在Vue中,我们可以通过定义一个新的Vue组件来实现这个功能。首先,我们需要在组件的模板中定义单选按钮的布局和样式。然后,在组件的脚本部分,我们需要处理属性的传递、默认选中的设置以及点击事件的触发等逻辑。
具体来说,我们需要使用Vue的props选项来接收attrArr和selIndexArr这两个属性。在模板中,我们可以使用v-for指令来遍历attrArr,并为每个属性生成一个单选按钮。通过动态绑定class和checked属性,我们可以实现按钮的样式和选中状态的控制。当用户点击按钮时,我们可以使用$emit方法触发click事件,并传递用户选择的属性序列数组。
使用方法
<!-- attrArr:属性数据 selIndexArr:选择序列数组 不设置默认不选中 @click:属性选择事件 返回属性选择序列数组 -->
<cc-radioBtnBox :attrArr="attrArr" :selIndexArr="selIndexArr" @click="selectAttrClick"></cc-radioBtnBox>
HTML代码实现部分
<template><view class="page"><!-- attrArr:属性数据 selIndexArr:选择序列数组 不设置默认不选中 @click:属性选择事件 返回属性选择序列数组 --><cc-radioBtnBox :attrArr="attrArr" :selIndexArr="selIndexArr" @click="selectAttrClick"></cc-radioBtnBox></view>
</template><script>export default {data() {return {// 设置都选择第一个selIndexArr: [0, 0, 0, 0],attrArr: [{attr: '系列',value: ['iphone 14系列', 'iphone 14 Pro系列']},{attr: '版本',value: ['128GB', '256GB', '512GB']},{attr: '颜色',value: ['午夜色', '星光色', '紫色', '蓝色', '红色', '黄色']},{attr: '白条',value: ['不分期', '3期', '6期', '12期']},],};},methods: {selectAttrClick(value) {console.log("选择属性的值 = " + value);uni.showModal({title: '选择属性的值',content: '选择属性的值 = ' + value})},}}<style scoped lang="scss">page {padding-bottom: 70px;}
</style>
三、组件使用与扩展
使用这个组件非常简单。我们只需要在父组件中引入它,并通过属性传递的方式将属性数据和默认选中状态传递给它。同时,我们还需要定义一个方法来处理用户选择属性时触发的事件。
除了基本的使用方式外,我们还可以根据实际需求对组件进行扩展和定制。例如,我们可以添加更多的样式选项,支持多选功能,或者与其他组件进行联动等。
四、总结与展望
通过组件化开发,我们可以将复杂的系统拆分成多个独立的组件,实现单独开发、单独维护,并且可以灵活地组合和复用这些组件。这不仅提高了开发效率,也使得系统的维护和扩展变得更加容易。
在本文中,我们介绍了一个仿京东天猫商品属性选择器自定义单选按钮组件的实现方法和使用方式。这个组件可以帮助我们快速实现商品属性的选择功能,提高开发效率。未来,我们将继续探索和实践组件化开发,为前端开发带来更多的便利和可能性。同时,我们也期待更多的开发者能够参与到组件化开发的实践中来,共同推动前端技术的发展和进步。
组件下载地址:
https://ext.dcloud.net.cn/plugin?id=13176
相关文章:
前端Vue组件化实践:打造仿京东天猫商品属性选择器组件
在前端开发领域,随着业务需求的日益复杂和技术的不断进步,传统的整体式应用开发模式已逐渐显得捉襟见肘。面对日益庞大的系统,每次微小的功能修改或增加都可能导致整个逻辑结构的重构,形成牵一发而动全身的困境。为了解决这一问题…...
智慧城市3d数据可视化系统提升信息汇报的时效和精准度
在信息大爆炸的时代,数据的力量无可估量。而如何将这些数据以直观、高效的方式呈现出来,成为了一个亟待解决的问题。为此,我们推出了全新的3D可视化数据大屏系统,让数据“跃然屏上”,助力您洞察先机,决胜千…...
Git 详解(原理、使用)
git 快速上手请看这篇博客 Git 快速上手 1. 什么是 Git Git 是目前最主流的一个版本控制器,并且是分布式版本控制系统,可以控制电脑上所有格式的文档 版本控制器:记录每次修改以及版本迭代的管理系统 对于文本文件,可以记录每次…...
android11为开机动画添加铃声(语音)
一、碰到的问题 1、第一次开机无铃声 2、开机时铃声和动画不同步,开头的铃声会丢失 3、开机时铃声/动画不能完全播放完 二、解决 以下为添加的patch /开机铃声不同步,语音第一段无声 diff --git a/media/libmediaplayerservice/MediaPlayerService…...
使用 Akshare 下载国内的期货(主力连续)、股票和指数的历史行情数据
本文介绍如何使用 akshare 下载国内期货、股票和指数的历史行情数据。 Akshare 是一个丰富的金融数据查询的 Python 库,提供了大量的金融数据接口。本文将详细介绍如何使用 Akshare 下载期货、股票和指数数据,并提供完整的代码示例,以求大家…...
【React】Google 账号之个性化一键登录按钮功能
“使用 Google 帐号登录”功能可快速管理网站上的用户身份验证。用户登录 Google 账号、表示同意,并安全地与平台共享其个人基础资料信息。 官方文档:链接 一、获取 Google API 客户端 ID 打开 Google API 控制台 中的凭据页面 创建或选择 Google API 项…...
MySQL已经连接对应数据库,但mapper中表名仍报错
如图所示,已经连接对应数据库但还要在其中选择,表多了一个个选会很麻烦 此时找到下图界面 选中对应数据库应用,项目中所有mapper就能找到对应表啦...
CentOS 7:停止更新后如何下载软件?
引言 CentOS 7 是一个广受欢迎的 Linux 发行版,它为企业和开发者提供了一个稳定、安全、且免费的操作系统环境。然而,随着时间的推移,CentOS 7 的官方支持已经进入了维护阶段,这意味着它将不再收到常规的更新和新功能,…...
MySQL GROUP_CONCAT 函数详解与实战应用
提示:在需要将多个值组合成一个列表时,GROUP_CONCAT() 函数为 MySQL 提供了一种强大的方式来处理数据 文章目录 前言什么是 GROUP_CONCAT()基本语法 示例使用 GROUP_CONCAT()去除重复值排序结果 前言 提示:这里可以添加本文要记录的大概内容…...
MATLAB Gazebo联合仿真
准备仿真环境:在Gazebo中设置仿真场景,包括机器人模型、环境布局、传感器和执行器等。编写MATLAB脚本:在MATLAB中编写控制算法和数据处理脚本,用于接收Gazebo中的传感器数据,并生成控制命令。建立通信:通过…...
Vue3 pdf.js将二进制文件流转成pdf预览
好久没写东西,19年之前写过一篇Vue2将pdf二进制文件流转换成pdf文件,如果Vue2换成Vue3了,顺带来一篇文章,pdf.js这个东西用来解决内网pdf预览,是个不错的选择。 首先去pdfjs官网,下载需要的文件 然后将下载…...
【机器学习】逻辑回归的原理、应用与扩展
文章目录 一、逻辑回归概述二、Sigmoid函数与损失函数2.1 Sigmoid函数2.2 损失函数 三、多分类逻辑回归与优化方法3.1 多分类逻辑回归3.2 优化方法 四、特征离散化 一、逻辑回归概述 逻辑回归是一种常用于分类问题的算法。大家熟悉的线性回归一般形式为 Y a X b \mathbf{Y}…...
Ubuntu22.04系统装好后左上角下划线闪烁不开机(N卡)
折腾了半天以为是ubuntu的系统和硬件不匹配, 最后发现的确有点关系, 就是显卡驱动的问题 解决办法: 1. 进入到safty模式下, 然后配好网络环境 2. 移除所有的驱动相关的包, sudo apt-get remove --purge nvidia* 3.…...
Leetcode刷题4--- 寻找两个正序数组的中位数 Python
目录 题目及分析方法一:直接合并后排序方法二:二分查找法 题目及分析 (力扣序号4:[寻找两个正序数组的中位数](https://leetcode.cn/problems/median-of-two-sorted-arrays/description/) 给定两个大小分别为 m 和 n …...
springBoot(若依)集成camunda
1、下图为项目结构 2、最外层 pom引入依赖 <properties><!--camunda 标明版本,注意要个自己的Spring 版本匹配,匹配关系自行查询官网--><camunda.version>7.18.0</camunda.version> </properties> 3、common模块引入依赖 …...
【微信小程序知识点】自定义构建npm
在实际开发中,随着项目的功能越来越多,项目越来越复杂,文件目录也变得很繁琐,为了方便进行项目的开发,开发人员通常会对目录结构进行优化调整,例如:将小程序源码放到miniprogram目录下。 &…...
JCR一区 | Matlab实现GAF-PCNN-MATT、GASF-CNN、GADF-CNN的多特征输入数据分类预测/故障诊断
JJCR一区 | Matlab实现GAF-PCNN-MATT、GASF-CNN、GADF-CNN的多特征输入数据分类预测/故障诊断 目录 JJCR一区 | Matlab实现GAF-PCNN-MATT、GASF-CNN、GADF-CNN的多特征输入数据分类预测/故障诊断分类效果格拉姆矩阵图GAF-PCNN-MATTGASF-CNNGADF-CNN 基本介绍程序设计参考资料 分…...
新手教学系列——高效管理MongoDB数据:批量插入与更新的实战技巧
前言 在日常开发中,MongoDB作为一种灵活高效的NoSQL数据库,深受开发者喜爱。然而,如何高效地进行数据的批量插入和更新,却常常让人头疼。今天,我们将一起探讨如何使用MongoDB的bulk_write方法,简化我们的数据管理流程,让代码更加简洁高效。 常规做法:find、insertone…...
C# Winform 自定义事件实战
在C#的WinForms中,自定义事件是一种强大的工具,它允许你创建自己的事件,从而在特定条件下通知订阅者。自定义事件通常用于封装业务逻辑,使代码更加模块化和易于维护。下面我将通过一个实战例子来展示如何在WinForms中创建和使用自…...
Python通过继承实现多线程
本套课在线学习视频(网盘地址,保存到网盘即可免费观看): https://pan.quark.cn/s/677661ea63b3 本节将介绍如何利用Python中的thread模块和threading模块实现多线程,并通过继承threading.Thread类并重写run方…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为:煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例,提供抽象制作饮品基类,提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes(简称K8s)中,Ingress是一个API对象,它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress,你可…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机,因为在使用过程中发现 Airsim 对外部监控相机的描述模糊,而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置,最后在源码示例中找到了,所以感…...
前端中slice和splic的区别
1. slice slice 用于从数组中提取一部分元素,返回一个新的数组。 特点: 不修改原数组:slice 不会改变原数组,而是返回一个新的数组。提取数组的部分:slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...
