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 文件传参及处理技巧分析
May 13 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
Vue3为什么这么快
Sep 23 Javascript
vue自定义树状结构图的实现方法
Oct 18 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/01/24 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python实现简单的TCP代理服务器
2014/10/08 Python
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
python中xlrd模块的使用详解
2021/02/01 Python
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
大学生简短的自我评价分享
2014/02/20 职场文书
计算机网络专业求职信
2014/06/05 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
2015年维修工作总结
2015/04/25 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python