美食杰----菜谱大全（二）

这篇文章接着续写上一篇菜谱大全，这篇文章主要写的是右边的侧栏部分。

一.思路：1.首先布局，要用到Element Ui组件来布局。

2.然后从后端获取数据。

3.将调用到的数据进行解构，再创建个空数组，将要用的数据保存的新建的数组里。

4.渲染数据。

5.实现Loading加载事件。

6.实现页码跳转效果，点击相应的代码，出现内容。

7.tab切换，实现一级，二级路由跳转。

二.接下来展示效果：

三.代码展示：

<template><div class="recipe"><!-- v-model="activeName" --><!-- 菜谱分类 start --><el-tabs v-model="classifyName" type="border-card" @tab-click="tabClick"><el-tab-panev-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, page: 1 },}"v-for="option in item.list":key="option.type":class="{ active: classifyType === option.type }">{{ option.name }}</router-link></div></el-tab-pane></el-tabs><!-- 菜谱分类 end --><h2>家常好味道，给你家一般的温暖</h2><!-- 容器 --><!-- 左侧列表 --><!-- 右侧显示 --><!-- 容器 --><el-container><el-aside width="220px" class="recipe-aside"><div class="filter-box"><h4>筛选</h4><!-- v-model="activeName" --><!-- 筛选 start --><el-collapse v-model="propertiesActivName"><el-collapse-itemv-for="item in properties":key="item.parent_type":title="item.parent_name":name="item.parent_type"><div class="filter-tags"><el-tagtype="info"v-for="option in item.list":key="option.type"@click="selectedTag(option)":class="{'tag-selected': propertyType[option.title] === option.type,}">{{ option.name }}</el-tag></div></el-collapse-item></el-collapse><!-- 筛选 end --></div></el-aside><el-main class="filter-menus-box"><div class="menu-empty" v-show="!list.length && !loading">暂时没有过滤出菜谱信息，请选择其他的筛选条件</div><menu-card style="min-height: 75%;" :info="list"></menu-card><div style="text-align: right;" v-show="!loading"><el-paginationstyle="display: inline-block;":page-size="10"layout="total, prev, pager, next":total="total":current-page.sync="page"@current-change="handlerSelect":hide-on-single-page="true"></el-pagination></div></el-main></el-container></div>
</template>
<script>
import MenuCard from "@/components/menu-card.vue";
import { getClassify, getProperty, getMenus } from "@/service/api";
// import { callbackify } from 'util';
export default {components: { MenuCard },data() {return {classify: [], //存储tab切换的所有数据classifyType: "1-1", //tab切换的选中项(二级路由)，里面存的谁，谁就是点击项让谁发生改变classifyName: "1", //定义刷新tab时的值（一级路由）//    属性：properties: [], //存储属性中的所有数据propertyType: {}, //存储属性的分类，例如：{craft：1-4，flavor=2-1}propertiesActivName: [], //记录所有的属性分类list: [], //存储右侧主体total: 0, //总页数loading: false, //是否显示遮罩层page: 1,};},watch: {$route: {handler() {const { classify, page } = this.$route.query; //luif (classify) {this.classifyType = classify; //存好的二级在这里 1-1this.classifyName = classify[0]; //这样就变为一级 1this.page = Number(page);}this.getMenuss(); //这里需要改},immediate: true,},},mounted() {getClassify().then(({ data }) => {// console.log(data);this.classify = data;if (!this.$route.query.classify) {this.classifyType = this.classify[0].list[0].type; //存好的二级在这里 1-1this.classifyName = classify[0].parent_type; //1this.$route.push({query: {classify: this.classifyType,page: 1,},});}});getProperty().then(({ data }) => {// console.log(data);this.properties = data;const { query } = this.$route; // {craft:'1-1',flavor: '2-1',hard: '3-2' }//传递空对象，来保存每次的参数值this.propertyType = this.properties.reduce((o, item) => {//item.title 工艺，难度，口味，人数o[item.title] = query[item.title] ? query[item.title] : "";if (o[item.title]) {this.propertiesActivName.push(o[item.title][0]);}return o;}, {});// console.log(this.propertyType);});},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;}// 地址栏记录选中的属性this.$router.push({query,});},getMenuss() {const query = { ...this.$route.query };const params = {page: query.page || "1",classify: query.classify,};delete query.page;delete query.classify;if (Object.keys(query).length) {params.property = {...query,};}this.loading = true;let loading = null;this.$nextTick(() => {loading = this.$loading({target: ".filter-menus-box",text: "Loading...",spinner: "el-icon-loading",background: "rgba(0,0,0,0.7)",});});this.list = [];//请求右侧数据getMenus(params).then(({ data }) => {if (this.loading) {loading.close();}this.loading = false;this.list = data.list;this.total = data.total;this.page = data.current_page;});},handlerSelect() {this.$router.push({query: {...this.$route.query,page: this.page,},});},tabClick() {const classifName = this.classifyName;const item = this.classify.find((item) => item.parent_type === classifName);//item是当前被点击到的一级路由（整体数据）if (item) {this.classifyName = item.parent_type;this.classifyType = item.list[0].type;this.$router.push({query: {...this.$route.query,classify: this.classifyType,},});}},},
};
</script>
<style lang="stylus">
.recipe-linkfont-size 0;margin-top 5pxadisplay inline-blockfont-size 12pxpadding 0px 8pxheight 28pxline-height 28px.activebackground #ff3232color #fff.recipeh2text-align centerline-height 150px.el-mainpadding 0.filter-boxbackground #fffpadding 10pxwidth 100%float leftbox-sizing border-box.filter-tagsdisplay flexflex-wrap wrapjustify-content space-around.tag-selectedbackground-color #ff3232color #fff.menu-emptywidth 100%text-align centerfont-size 20px
</style>

以上这篇文章实现的效果就是美食杰----菜谱大全，谢谢大家观看！！！

美食杰----菜谱大全（二）相关推荐

vue项目美食杰菜谱大全实现（二）
接上篇,vue项目美食杰菜谱大全实现效果图分析: 整体分为三大部分 1.先实现菜谱分类头部实现 (1)先实现家常菜谱中华菜系和各地小吃的实现,通过后端获取到数据,渲染页面(2)再实现第一部中的每一 ...
美食杰-菜谱大全（一）
一,效果展示二,效果概要 tab切换获取api中的数据点击换css样式渲染页面三,技术要求熟悉element组件库掌握vue-cli脚手架掌握vue-router路由掌握vuex库 ...
vue项目美食杰菜谱大全实现（三）
接上篇,vue项目美食杰菜谱大全已经实现,今天来说一下菜单详情的实现分析: 这个菜单详情页面,考验的知识很少,基本都是拿数据渲染分为4大部分,四个组件: 1.detail: detail组价: 根 ...
美食杰----菜谱大全
今天我们来写美食杰的菜谱大全页面,首先要讲的是实现这个页面的流程: 拿到数据----渲染数据----监听路由传参----判断----写点击事件 1.在api里面拿到数据getClassify, get ...
美食杰-菜谱大全右侧主体
根据用户的选择,展示不同的数据分页在data中定义需要的数组 data() {return {classify: [],property: [],propertype: {}, //存储分类的属性 ...
vue项目美食杰--菜谱大全
项目已经接近尾声了,难度也随之增加,不过,世上无难事,只要肯登攀,遇到困难,打倒它,然后在遇到更大的困难..当然了,在这个过程中我们的技术和心理素质也会逐步的提高..今天分享一个小小难度的部分,菜谱大 ...
美食杰--------菜谱大全
话不多说,直接看效果图: HTML: <template><div class="recipe"><!-- v-model="activeN ...
vue项目美食杰菜谱大全实现
效果图分析 1.先实现菜谱分类头部实现 (1)先实现家常菜谱中华菜系和各地小吃的实现 (2)再实现第一部中的每一项 2.实现左边筛选中的功能 (1)先实现工艺,口味,难度,人数 (2)实现第一步中包 ...
美食杰—菜谱大全右侧
1.定义一个数组存放右侧数据: 2.请求右侧数据: 3.点击页面更改内容: 4.遮罩层: 遮罩层图总体效果图

美食杰----菜谱大全（二）

美食杰----菜谱大全（二）相关推荐

最新文章

热门文章