vue 淘宝商品筛选功能

- 日理万妓 2021-07-24 12:23 698阅读 0赞

* { 
      margin: 0;
      padding: 0;
    }
    ul, li { 
      list-style: none;
    }
    
    #app { 
      width: 600px;
      margin: 80px auto;
      padding: 5px 15px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 12px;
      color: #666;
    }
    
    #app .goods { 
      display: flex;
      align-items: center;
      border-bottom: 1px dashed #eee;
      text-indent: 2em;
    }
    
    #app .goods:last-child { 
      border-bottom: none;
    }
    
    #app .goods .type-list { 
      display: flex;
      text-indent: 0;
    }
    
    #app .goods .type-list .type { 
      margin: 15px 7px;
      padding: 5px 6px;
      border-radius: 3px;
      color: #039;
      cursor: pointer;
    }
    
    #app .goods .type-list .type:hover { 
      color: #f60;
      background-color: #f3edc2;
    }
    
    #app .goods .type-list .type.active { 
      color: #fff;
      background-color: #f60;
    }
    
    #app .choose-type { 
      display: flex;
      align-items: center;
      font-weight: bold;
    }
    
    #app .choose-type .no-goods { 
      color: #999;
      font-weight: normal;
      padding: 20px;
    }
    
    #app .choose-type .filter-list { 
      display: flex;
      font-weight: normal;
    }
    
    #app .choose-type .filter-list li { 
      margin: 15px 10px;
      padding: 5px 8px;
      border-radius: 3px;
      color: #fff;
      background-color: #f60;
      cursor: pointer;
    }
    
    #app .choose-type .filter-list li .delete-goods { 
      opacity: .5;
    }
    
    #app .choose-type .filter-list li .delete-goods:hover { 
      opacity: 1;
    }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./vue.js"></script> <link rel="stylesheet" href="./index.css"> </head> <body> <div id="app"> <div class="goods" v-for="(goods, goodsIndex) in goodsList" :key="goods.id" > <div class="title">{ {  goods.title }}：</div> <ul class="type-list"> <li class="type" :class="{ 
                active: typeIndex === goods.index
              }" v-for="(type, typeIndex) in goods.typeList" :key="type" @click="addFilterHandle(typeIndex, goods, type, goodsIndex)" >{ {  type }}</li> </ul> </div> <div class="choose-type" > <div>已选条件:</div> <span class="no-goods" v-if="!showFilterGoods" > 暂时没有选择过滤条件 </span> <ul class="filter-list" v-else > <li v-for="(goods, goodsKey) in filterObj">
              { {  goods }}
              <span class="delete-goods" @click="deleteFilterGoods(goodsKey)" >x</span> </li> </ul> </div> </div> <script> const vm = new Vue({ 
          el: '#app', data: { 
            filterObj: { }, showFilterGoods: false, goodsList: [
              { 
                title: '上装',
                typeList: ['全部', '针织衫', '毛呢外套', 'T恤', '羽绒服', '棉衣', '卫衣', '风衣' ],
                id: 1,
              },
              { 
                title: '裤装',
                typeList: ['全部', '牛仔裤', '小脚/铅笔裤', '休闲裤' ,'打底裤', '哈伦裤'],
                id: 2,
              },
              { 
                title: '裙装',
                typeList: ['全部', '连衣裙', '半身裙', '长袖连衣裙', '中长款连衣裙'],
                id: 3,
              }
            ]
          }, methods: { 
            addFilterHandle (typeIndex, goods, type, goodsIndex) { 
              if(type === '全部') {         //如果标签等于全部,则返回结果
                return;
              }
    
              this.showFilterGoods = true;   //已选条件内容显示
              goods.index = typeIndex;     //goodsList的索引值等于typeIndex
              vm.$set(this.filterObj, goodsIndex, type);  //用来更新数组或者对象  需要更新的数组或对象,索引值,更新的内容
            }, deleteFilterGoods (goodsKey) { 
              this.$delete(this.filterObj, goodsKey);  //删除
              this.goodsList[goodsKey].index = 0;   //点击删除之后  选中状态为全部 索引为0
              this.changeShowFilter();  //目的是全部删除之后 暂时没有过滤条件 存在
            }, changeShowFilter () { 
              const filterObjStr = JSON.stringify(this.filterObj); this.showFilterGoods = filterObjStr !== '{ }';   //filterObjStr空了 showFilterGoods变为false
            }
          }
        })
        vm.goodsList.forEach(item => vm.$set(item, 'index', 0));
      </script>
    </body>
    </html>