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 相关文章推荐
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
JQuery控制DIV的选取实现方法
Sep 18 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
swiperjs实现导航与tab页的联动
Dec 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编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
贝佳斯官方网站:Borghese
2020/05/08 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
《母亲的恩情》教学反思
2014/02/13 职场文书
真诚的求职信
2014/07/04 职场文书
求职信的正确写法
2014/07/10 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
化验员岗位职责
2015/02/14 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
教你一步步实现一个简易promise
2021/11/02 Javascript
java executor包参数处理功能 
2022/02/15 Java/Android
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL