一，效果展示

二，效果概要

1.数据渲染

2.页码数

3.条数

4.遮盖层

三，技术掌握

1.熟悉element组件库

2.掌握vue-cli脚手架

3.掌握vue-router路由

4.掌握vuex库

5.vue中v-for的使用

6.vscode编辑器

四，实现效果

1.首先是渲染数据，通过调用后台给的接口用.then方法异步操作拿到data数据，在data中设置list空数组，total设置为1，current_page设置为1（注意一定要是数字类型），然后接收值

getMenus(params).then(({data}) =>{console.log(data);// this.loading = trueif(this.loading) loading.close();this.loading = falsethis.list = data.list;this.total = data.total;this.page = data.current_page;})

2.渲染到页面，":page-size='5'"是当前页面显示

<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="5"layout="total, prev, pager, next":total="total":current-page.sync="page"@current-change="handlerSelect":hide-on-single-page="true"></el-pagination></div></el-main>

3.页面数切换以及跟随更新

handlerSelect(){this.$router.push({query:{...this.$route.query,page:this.page}})},

4.遮盖层设置，在data中设置loading值为false，false是隐藏，当为true的时候显示，所以在调用他之前需要把loading改为true

 this.$nextTick(() =>{loading = this.$loading({target:'.filter-menus-box',text:'Loading...',spinner:'el-icon-loading',background:'rgba(0,0,0,0.7)'})})

5.由于在点击切换的时候原数据还在，所以在loading之前还需要把list中的数据情况，即this.list=[];然后由于loading再切换的时候会一直显示，因为我们在前边把loading改为了true的原因，所以需要在数据加载成功时把loading改为false

6.懒人操作，下边是整体代码

<template><div class="recipe"><!-- 菜谱分类 start --><el-tabs  type="border-card"v-model="classifyName"@tab-click = "tabClick"><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,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="propertyActiveName"><el-collapse-itemv-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><!-- 筛选 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="5"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';export default {components: {MenuCard},data() {return {classify:[],//存储tab切换的所有数据classifyType:"1-1",//tab切换的选中项（二级路由）classifyName:"1",//定义刷新tab时的值（一级路由）//属性properties:[],//存储属性中的所有数据propertyType:{},//存储属性的分类propertyActiveName:[],//记录所有的属性分类list:[],//存储右侧主题total:0,//总页数loading:false,//是否显示遮罩层page:1}},watch: {$route: {handler(){const {classify,page} = this.$route.query;if(classify){this.classifyType = classify;//1-1this.classifyName = classify[0]; //1this.page = Number(page);}this.ThisgetMenus();},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 = this.classify[0].parent_type; //1this.$router.push({query:{classify: this.classifyType,page:1}})}});getProperty().then(({data})=>{// console.log(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.propertyActiveName.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;}this.$router.push({query})},ThisgetMenus(){const query = {...this.$route.query}const params = {page:query.page || 1,classify:query.classify}delete query.pagedelete query.classifyif(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}) =>{console.log(data);// this.loading = trueif(this.loading) loading.close();this.loading = falsethis.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.classifyNameconst item = this.classify.find(item => item.parent_type === classifName);//item 是被点击到的 一级路由整体（整体数据）if(item){this.classifyName = item.parent_type; //一级路由的typethis.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-selected background-color #ff3232 !importantcolor #fff !important.menu-emptywidth 100%text-align centerfont-size 20px
</style>

五，注意事项

1.page值必须为Number类型，否则会一直报错，可以在这强行转为Number类型

六，总结

本文讲了美食杰菜谱大全功能的实现，整篇结束，界面的布局介绍，如果您还有更好地理解，欢迎沟通
定位：分享 &知识点，有兴趣可以继续关注 vue.js html

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

美食杰----菜谱大全（二）
这篇文章接着续写上一篇菜谱大全,这篇文章主要写的是右边的侧栏部分. 一.思路:1.首先布局,要用到Element Ui组件来布局. 2.然后从后端获取数据. 3.将调用到的数据进行解构,再创建个空数组 ...
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.遮罩层: 遮罩层图总体效果图

美食杰-菜谱大全（二）