菜谱分类

一. 页面布局

在Recipe.vue文件中做的布局选项卡标题侧边栏列表分页器

<template>
  <div>
    <!--选项卡-->
    <el-tabs></el-tabs>
    <!--标题-->
    <h2></h2>
    <!--主要部分-->
    <el-container>
      <!--侧边栏-->
      <el-aside></el-aside>
      <!--列表+分页器-->
      <el-container>
        <!--列表-->
        <el-main></el-main>
        <!--分页器-->
        <el-footer>
          <el-pagination></el-pagination>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

二. 创建路由

//src/router/index.js
import Recipe from "@/views/recipe/Recipe.vue";
Vue.use(VueRouter);
const routes = [
  {
    path: "/recipe",
    name: "recipe",
    title: "菜谱大全",
    component: Recipe,
  },
];

三. 更改头部导航

在Headder.vue组件中，绑定默认激活的导航

<template>
  <div>
    .....
    <el-menu mode="horizontal" :default-active="$router.currentRoute.name">
      <!-- 菜单项 导航项 -->
      <el-menu-item index="home">
        <router-link to="/">首页</router-link>
      </el-menu-item>
      <el-menu-item index="recipe">
        <router-link :to="{ name: 'recipe' }">菜谱大全</router-link>
      </el-menu-item>
    </el-menu>
  </div>
</template>

注意：

:mode="horizontal"和mode="horizontal"
- 前面绑定属性，horizontal是data中的属性，如果在data中未定义，就会报错
- 后面是直接设置属性
:default-active="$router.currentRoute.name" 绑定的是路由的name值，要保证这个值与菜单项中的index的值要匹配,进而实现进入页面时高亮显示对应导航

四. 补充页面内容

1. 菜谱分类（选项卡）

使用的是el-tabs组件子项叫el-tab-pane

<!--选项卡 -->
<el-tabs type="border-card">
  <el-tab-pane label="家常菜谱">
    <div class="recipe-link">
      <router-link to="" class="active">分类1</router-link>
      <router-link to="">分类1</router-link>
      <router-link to="">分类1</router-link>
    </div>
  </el-tab-pane>
</el-tabs>

2. 筛选的样式

采用的是el-collapse 折叠面板/手风琴子项el-collapse-item

<el-collapse>
  <el-collapse-item title="口味" name="1">
    <div class="filter-tags">
      <el-tag type="info" class="selected-tag">酸</el-tag>
      <el-tag type="info">甜</el-tag>
      <el-tag type="info">苦</el-tag>
      <el-tag type="info">辣</el-tag>
    </div>
  </el-collapse-item>
</el-collapse>

3. 筛选后的列表

筛选后的列表与首页的样式基本一致，将WaterFall.vue组件做拆分，一个显示列表MenuCard.vue，另一个做加载更多WaterFall.vue

WaterFall.vue代码 (加载更多)

<template>
  <div class="waterfall" ref="waterfall">
    <slot></slot>
    <!-- 显示加载更多 -->
    <div class="waterfall-loading" v-show="isLoading">
      <i class="el-icon-loading"></i> 等待加载
    </div>
  </div>
</template>

MenuCard.vue 代码 (展示列表数据)

<template>
  <div>
    <el-row :gutter="20" type="flex" justify="start" class="menu-card">
      <!-- MongoDB会自动创建 _id字段，这个字段是数据的唯一标识 -->
      <el-col v-for="item in info" :key="item._id">
        <el-card :body-style="{ padding: '0px' }">
          <!-- 使用超链接包裹 router-link -->
          <router-link
            :to="{ name: 'detail', query: { menuId: item.menuId } }"
          >
            <img :src="item.product_pic_url" class="image" />
            <div style="padding: 14px" class="menu-card-detail">
              <h3>{{ item.title }}</h3>
              <div class="comment-len">{{ item.comments_len }} 评论</div>
              <!-- 在a标签中通常不包裹a标签 使用其他标签做替换-->
              <router-link
                :to="{ name: 'user-space', query: { userId: item.userId } }"
                tag="span"
              >
                <!-- 在前端显示是span标签，超链接仍然生效 -->
                <!-- tag="span"可替换为tag="em " -->
                <!-- 跳转到个人主页 -->
                <div class="author">{{ item.name }}</div>
              </router-link>
            </div>
          </router-link>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    name: "MenuCard",
    props: {
      // 数据
      info: {
        // 规定数据类型是数组
        type: Array,
        // 引用数据类型，default是一个函数，返回值是数组
        default: () => [],
      },
    },
  };
</script>

拆分成两个组件后，更改首页中的代码，

<template>
  <Waterfall @loading-more="loadingMoreHandle" ref="waterfall">
    <MenuCard :info="menus"></MenuCard>
  </Waterfall>
</template>
<script>
  import MenuCard from "@/components/MenuCard.vue";
  import Waterfall from "@/components/Waterfall.vue";
  export default {
    name: "HomeView",
    // 注册组件
    components: {
      Waterfall,
      MenuCard,
    },
  };
</script>

使用MenuCard组件，来测试数据

<template>
  <div class="recipe">
    <el-main>
      <MenuCard :info="[{}, {}, {}, {}, {}]"></MenuCard>
    </el-main>
  </div>
</template>
<script>
  import MenuCard from "@/components/MenuCard";
  export default {
    name: "Recipe",
    components: { MenuCard },
  };
</script>

4. 分页代码

<el-footer height="">
  <!-- 分页 -->
  <el-pagination
    :page-sizes="[20, 40, 80, 100]"
    layout="total, prev, pager, next"
    :total="500"
    background
  >
  </el-pagination>
</el-footer>

5. 样式

.recipe {
  .recipe-link {
    a {
      display: inline-block;
      font-size: 12px;
      padding: 3px 10px;
      line-height: 28px;
    }

    .active {
      background-color: #f00;
      color: #fff;
    }
  }

  h2 {
    text-align: center;
    // line-height: 150px;
    line-height: 80px;
    font-weight: normal;
  }

  .el-aside {
    background-color: #fff;
    padding: 20px 20px;

    h4 {
      margin-bottom: 15px;
    }

    // 筛选按钮
    .filter-tags {
      display: flex;
      // 超出换行
      flex-wrap: wrap;
      // 两端对齐
      justify-content: space-around;

      span {
        min-width: 56px;
        margin-bottom: 10px;
        text-align: center;

        // .span.selected-tag 类名是selected-tag的span标签
        &.selected-tag {
          background-color: #f00;
          color: #fff;
        }
      }
    }
  }

  .el-footer {
    text-align: right;
  }
}

仿美食杰项目第三篇