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


Posted in Javascript onNovember 27, 2017

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

0、结果放前面

点击查看效果

带脚手架的源码

加个Star后,fork下来。

然后在控制台,先输入npm install安装依赖,再输入npm run dev运行查看效果

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下来。

然后在控制台,先输入npm install安装依赖,再输入npm run dev运行查看效果

详细请参考注释:

/**
* Created by 王冬 on 2017/11/14.
* QQ: 20004604
* weChat: qq20004604
*/

<template>
 <div>
  <button @click='getList'>输出结果</button>
  <div>
   输入分类名,然后点击【确认】按钮添加新的分类
   <input type='text' v-model='category'>
   <button @click='addCategory'>确认</button>
  </div>

  <template v-for='i in categoryList'>
   <div class='category'>
    <p>类别:{{i.name}}</p>
    <div>属性:
     <p>新增属性名:<input type='text' v-model='i.newPropertyName'>
      <button @click='addToPropertyList(i)'>点击添加</button>
     </p>
     <div class='property-list'>
      <template v-for='pro in i.propertyList'>
       <div class='property'>{{pro}}</div>
      </template>
      <div class='clearfloat'></div>
     </div>
    </div>
   </div>
  </template>

  <p>以下是展示列表</p>
  <div class='show-list'>
   <table>
    <tr>
     <td v-for='i in categoryList'>
      {{i.name}}
     </td>
     <td>价格</td>
     <td>数量</td>
    </tr>
    <tr v-for='(val,key) in showList'>
     <td v-for='i in categoryList'>
      {{val[i.name]}}
     </td>
     <td>
      <input type='text' v-model="val['price']">
     </td>
     <td>
      <input type='text' v-model="val['count']">
     </td>
    </tr>
   </table>
  </div>
 </div>
</template>
<style scoped>
 .category {
  border: 1px solid #333;
 }

 .property {
  float: left;
  border: 1px solid #333;
  display: inline-block;
 }

 table {
  border-collapse: collapse;
 }

 th, td {
  border: 1px solid #000;
 }

 /*--清除浮动--*/
 .clearfloat {
  width: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
 }
</style>
<script>
 export default {
  data () {
   return {
    // 要添加的新类别的名字
    category: '',
    // 类别列表
    categoryList: [
     {
      // 类别名
      name: '颜色',
      // 类别属性列表
      propertyList: ['白色', '绿色']
     },
     {
      name: '尺寸',
      propertyList: ['10', '20']
     },
     {
      name: '类型',
      propertyList: ['衣服', '裤子']
     }
    ]
   }
  },
  computed: {
   // 输出列表
   showList () {
    let arr = []
    this.toGet(arr, {}, 0, this.categoryList.length)
    return arr
   }
  },
  methods: {
   // 添加一个新的类别
   addCategory () {
    // 创建新类别
    let obj = {
     name: this.category,
     propertyList: [],
     newPropertyName: ''
    }
    // 添加到类别列表中
    this.categoryList.push(obj)
    this.category = ''
   },
   // 向类别添加属性
   addToPropertyList (category) {
    // 在该类别的属性里列表里添加新的属性
    category.propertyList.push(category.newPropertyName)
    category.newPropertyName = ''
   },
   // 递归
   getList () {
    console.log(this.showList)
    return this.showList
   },
   // 将数据组合成列表,利用递归的特性
   toGet (arr, obj, currentIndex, maxLength) {
    if (currentIndex >= maxLength) {
     return
    }
    this.categoryList[currentIndex].propertyList.forEach(item => {
     // 在组合到最后一个之前,不停的往模板对象上添加属性
     obj[this.categoryList[currentIndex].name] = item
     if (currentIndex === maxLength - 1) {
      // 组合到最后一个后,创建一个新的对象,然后放置入列表中
      let result = Object.assign({}, obj)
      result.price = '0'
      result.count = '1'
      arr.push(result)
     } else {
      this.toGet(arr, obj, currentIndex + 1, maxLength)
     }
    })
   }
  }
 }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 #Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 #Javascript
vue实现商城购物车功能
Nov 27 #Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 #Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 #Javascript
JavaScript实现修改伪类样式
Nov 27 #Javascript
Vue.js搭建移动端购物车界面
Jun 28 #Javascript
You might like
php中注册器模式类用法实例分析
2015/11/03 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
Python中的is和id用法分析
2015/01/26 Python
讲解Python中的标识运算符
2015/05/14 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
python中的变量如何开辟内存
2018/06/26 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
计算机本科生自荐信
2013/10/15 职场文书
公益活动策划方案
2014/01/09 职场文书
打架检讨书500字
2014/01/29 职场文书
购房意向书范本
2014/04/01 职场文书
公司介绍信范文
2015/01/31 职场文书
学年个人总结范文
2015/03/05 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android