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

本文实例为大家分享了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>

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

(0)

相关推荐

  • 基于Vuejs实现购物车功能

    本文实例为大家分享了Vuejs购物车实现代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的vue购物车</title> <link rel="stylesheet" href="css/bootstrap.min.css&q

  • Vue实现购物车场景下的应用

    本文实例为大家分享了Vue在购物车场景下的应用,供大家参考,具体内容如下 购物车场景需求: 1. 商品.店铺.购物车的选择 2. 商品删除 关键代码 测试数据 var _list = [{ checked: false, goods: [{ name: "商品1", price: 23, checked: false }] }, { checked: false, goods: [{ name: "商品2", price: 20, checked: false },

  • 用vue和node写的简易购物车实现

    项目介绍 这是用vue写前端,用node来接收前端发来的请求,然后进行相应的数据操作,例如数据的存取和删除等.这是个人的练习项目,目前功能做的比较简单,主要是展示商品列表,把商品加入购物车,从购物车删除商品三个小功能. 搭建本地环境 因为是用vue,需要用babel把es6语法转为es5语法. 1.配置.babelrc文件 { "presets": [ "es2015", "stage-2" ], "plugins": [&q

  • Vue.js搭建移动端购物车界面

    本文介绍了如何使用Vue搭建一个移动端购物车界面,最终实现的功能包括: 1. 选择要最终购买的物品 2. 选择每件物品购买的数量 3.  实时更新所选择物品的总价格 HTML部分 首先给出HTML部分代码和注释,显示了整个界面的结构. <body> <div class="checkout"> <div id="app"> <div class="container"> <div class=

  • vuejs手把手教你写一个完整的购物车实例代码

    由于我们公司是主营业务是海淘,所以每个项目都是类似淘宝天猫之类的商城,那么购物车就是一个重点开发功能模块.介于之前我都是用jq来写购物车的,这次就用vuejs来写一个购物车.下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑. 1.一层数据结构-全选 下面这段代码和vuejs官网里面checkbox绑定很像.不明白的可以直接上vuejs官网看看. <!DOCTYPE html> <html lang=

  • Vuejs实现购物车功能

    开始更新前端框架Vue.JS的相关博客. 功能概述 学习了Vue.JS的一些基础知识,现在利用指令.数据绑定这些基础知识开发一个简单的购物车功能.功能要点如下: (1)展示商品的名称.单价和数量: (2)商品的数量可以增加和减少: (3)购物车的总价要实时更新,即数量发生变动,总价也要相应的改变: (4)商品可以从购物车中移除: (5)具有选择功能,只计算选中的商品的总价. 上一张截图,如下: 代码 代码分成三部分,分别是HTML.JS.CSS.关键的是HTML和JS. HTML <!DOCTY

  • vue实现商城购物车功能

    本文实例为大家分享了vue实现商城购物车功能的具体代码,供大家参考,具体内容如下 首先,先上最终的效果图 效果并不是很好看,但是这不是重点. 首先,我们先看下布局: <template> <div class="shopcar" id="demo04"> <div class="header-title"> <h3>购物车</h3> </div> <div class=

  • vue购物车插件编写代码

    本文实例为大家分享了vue购物车插件的具体代码,供大家参考,具体内容如下 先上效果图 下面相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-sca

  • Vue2.0实现购物车功能

    简介 vue.js是由华人尤雨溪开发的一套MVVM框架.vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统,它非常适用于具有复杂交互逻辑的前端应用,如一些单页应用程序,有很多表单操作,页面中的内容需要根据用户的操作动态变化. 主要特性: 1.响应式的数据绑定  2.组件化开发  3.Virtual DOM 开发准备 工具 我使用的编辑器是sublime text3,首先要先安装个插件sublimeServer,用来搭建一个http服务器,使用详情请查看这篇博

  • Vue实现购物车功能

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="external nofollow" /> &l

随机推荐