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 相关文章推荐
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
Jquery注册事件实现方法
May 18 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
javascript获取元素的计算样式
May 24 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 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分页函数完整实例代码
2014/09/22 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
用JS剩余字数计算的代码
2008/07/03 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
动态创建类实例代码
2009/10/07 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
Python中Selenium模块的使用详解
2020/10/09 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
征用土地赔偿协议书
2014/09/26 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
欠款证明
2015/06/24 职场文书
运动会致辞稿
2015/07/29 职场文书
golang中的并发和并行
2021/05/08 Golang