vue美食杰项目之菜谱大全实现效果（一）

目录

• recipe.vue
• 注意：因为用到了element-ui组件，所以需要先安装element-ui组件，进入项目根目录后

  执行

npm i element-ui

思路：

       1.找到对应的组件进行数据渲染

        2. 都要对路由参数进行解构

        3.在tab切换时,通过路由参数来进行切换，跳转成不同的参数来展示数据

        4.在筛选时，通过点击‘炒’进行颜色切换，但颜色如果没有进行切换，要给css样式加上权重

 .filter-tags .tag-selected {
    background-color: #ff3232 !important;
    color: #fff;
  }

2.效果展示

  

 3.视图页面：views

        recipe.vue

<template>
  <div class="recipe">
    <!-- 菜谱分类 start -->
    <el-tabs type="border-card" v-model="classifyName">
      <el-tab-pane v-for="item in classify" :key="item.parent_type"
        :label="item.parent_name" :name="item.parent_type"
      >
        <div class="recipe-link">
          <router-link :to="{ query: { ...$router.query, classify: option.type } }"
            v-for="option in item.list" :key="option.type" :class="{ active: classifyType === option.type }"
          >{{ option.name }}
          </router-link>
        </div>
      </el-tab-pane>
    </el-tabs>
    <h2>家常好味道，给你家一般的温暖</h2>
    <!-- 容器 -->
    <!-- 左侧列表 -->
    <!-- 右侧显示 -->
    <!-- 容器 -->
    <el-container>
      <el-aside width="220px" class="recipe-aside">
        <div class="filter-box">
          <h4>筛选</h4>
          <!-- 筛选 start -->
          <el-collapse v-model="properActiveName">
            <el-collapse-item v-for="item in properties" :key="item.parent_type"
              :title="item.parent_name" :name="item.parent_type"
            >
              <div class="filter-tags">
                <el-tag type="info"  v-for="option in item.list" :key="option.type"
                  @click="selectedTag(option)" :class="{'tag-selected': propertyType[item.title] === option.type}"
                >
                  {{ option.name }}
                </el-tag>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-aside>
      <el-main class="filter-menus-box">
        <!--<div class="menu-empty">暂时没有过滤出菜谱信息，请选择其他的筛选条件</div>-->
        <menu-card style="min-height: 75%"></menu-card>
        <div style="text-align: right">
          <el-pagination style="display: inline-block":page-size="10" layout="total, prev, pager, next" :total="50">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import MenuCard from "@/components/menu-card.vue";
import { getClassify, getProperty} from "@/service/api";
export default {
  components: { MenuCard },
  data() {
    return {
      classify: [], // 存储tab切换的所有数据
      classifyType: "1-1", // tab切换的选中项(二级路由)
      classifyName: "1", // 定义刷新tab时的值(一级路由)
      properties: [], // 存储属性中的所有数据
      propertyType: {}, // 存储属性的分类. 例如：  {craft：1-4, flavor=2-1}
      properActiveName:[]   //记录所有的属性分类
    };
  },
  watch: {
    $route: {
      handler() {
        const { classify } = this.$route.query;
        if (classify) {
          this.classifyType = classify; // 1-1
          this.classifyName = classify[0]; // 1
        }
      },
      immediate: true,//立即执行
    },
  },
  mounted() {
    getClassify().then(({ data }) => {
      console.log(data);
      this.classify = data;
      if (!this.$route.query.classify) {//判断路由参数是否是classify的数据
        this.classifyType = this.classify[0].list[0].type; // 1-1
        this.classifyName = this.classify[0].parent_type; // 1
        this.$router.push({//添加路由
          query: {
            classify: this.classifyType,
            page: 1,
          },
        });
      }
    });
    getProperty().then(({ data }) => {
      this.properties = data;
      const { query } = this.$route;
        //传递空对象，来保存每次的参数值
      this.propertyType = this.properties.reduce((o, item) => {
        //  item.title :  工艺，难度，口味，人数
        o[item.title] = query[item.title] ? query[item.title] : "";
        if(o[item.title]){//判断刷新是不会掉选中的数据
            this.properActiveName.push(o[item.title][0])
        }
       return o;
      }, {});
    });
  },
  methods: {
    selectedTag(option) {//点击事件
      let query = { ...this.$route.query };
      // 判断是否点击， 如果点击过：取消、 否则，选中
      if (this.propertyType[option.title] === option.type) {
        this.propertyType[option.title] = "";
        delete query[option.title];
      } else {
        this.propertyType[option.title] = option.type;
        query[option.title] = option.type;
      }
      console.log(this.propertyType);
      this.$router.push({
        query,
      });
    },
  },
};
</script>
<style lang="stylus">
.recipe-link {
  font-size: 0;
  margin-top: 5px;
  a {
    display: inline-block;
    font-size: 12px;
    padding: 0px 8px;
    height: 28px;
    line-height: 28px;
  }
  .active {
    background: #ff3232;
    color: #fff;
  }
}
.recipe {
  h2 {
    text-align: center;
    line-height: 150px;
  }
  .el-main {
    padding: 0;
  }
  .filter-box {
    background: #fff;
    padding: 10px;
    width: 100%;
    float: left;
    box-sizing: border-box;
  }
}
.filter-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .filter-tags .tag-selected {
    background-color: #ff3232 !important;
    color: #fff;
  }
.menu-empty {
  width: 100%;
  text-align: center;
  font-size: 20px;
}
</style>

reduce()

方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。