好资源导航 » 文章资讯 » vue实现商城上货组件简易版

vue实现商城上货组件简易版

2023-09-20 10:29:08 215

本文实例为大家分享了vue实现商城上货组件的具体代码，供大家参考，具体内容如下

0、结果放前面

点击查看效果

带脚手架的源码

加个Star后，fork下来。

然后在控制台，先输入npminstall安装依赖，再输入npmrundev运行查看效果

1、先列需求

一切开发都是基于需求做的，所以需求先行，根据需求设计功能。

需求如下：

上货商品有多个属性类别；（例如：颜色、尺寸、型号）
每个类别有多个子属性；（例如：白色、绿色、金色）
每个商品必然具备每个类别的其中一个子属性；
除此之外还有额外属性，如【库存】、【描述】、【价格】等，每个都有；
要求属性类别可以无限添加；
要求每个属性类别下面的子属性可以无限添加；
最后输出所有组合，以及他们每个组合的额外属性；

例如：

颜色（白色，金色），尺寸（41，42）；
那么一共有四种组合：（白色，41），（白色，42），（金色，41），（金色，42）；
然后给每个组合加上价格、数量等属性，最后用JSON格式输出；

例如输出以下结果：

[
{
'颜色':'白色',
'尺寸':'10',
'price':'0',
'count':'1'
},
{
'颜色':'白色',
'尺寸':'20',
'price':'0',
'count':'1'
},
{
'颜色':'绿色',
'尺寸':'10',
'price':'0',
'count':'1'
},
{
'颜色':'绿色',
'尺寸':'20',
'price':'0',
'count':'1'
}
]

2、思路

由于无限可扩展的特性，因此模块分拆为两部分：

负责支持无限添加功能（包括类别和类别的属性）；
根据已添加的类别和属性，组合出列表，并将列表展示或输出；

3、代码如下

由于功能类似，因此没有写删除、修改功能，但思路跟添加是一致的。

点击查看效果

带脚手架的源码

加个Star后，fork下来。

然后在控制台，先输入npminstall安装依赖，再输入npmrundev运行查看效果

详细请参考注释：

/**
*Createdby王冬on2017/11/14.
*QQ:20004604
*weChat:qq20004604
*/

以下是展示列表

{{i.name}}

{{val[i.name]}}

价格	数量

.category{ border:1pxsolid#333; } .property{ float:left; border:1pxsolid#333; display:inline-block; } table{ border-collapse:collapse; } th,td{ border:1pxsolid#000; } /*--清除浮动--*/ .clearfloat{ width:0; clear:both; overflow:hidden; visibility:hidden; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com