美食杰项目（菜谱大全）效果介绍

1.看一下要实现的效果

1.1. 点击实现家常菜谱中华菜系各地小吃的tab切换

1.2. 点击各个菜系实现高亮变红选中

1.3 点击工艺口味难度口味下的按钮右侧的菜品会进行筛选菜品会发生变化

1.4 菜品会进行分页可以点击进行上一页下一页的切换

1.5 菜品未显示时会有一个正在加载中的蒙板

1.6 当筛选菜品不足一页将不会进行分页

2. 效果显现方式

使用vue脚手架搭建项目完成效果

使用element组件库

使用vue-router路由

然后就是获取数据操作数据

效果整体图

当菜品出现一页以上显示分页器

当赛选菜品不足一页时不会出现分页器

当菜品未出现时显示loding加载

代码片段

   import {getClassify, getProperty, getMenus} from '@/service/api';

后端写好的api里面储存我们想要的数据

getClassify获取现家常菜谱中华菜系各地小吃这一块的数据

getProperty获取筛选口味这一块的数据

getMenus 拿到商品块的数据

然后就是整个代码块懒得说了直接看

<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"//循环遍历头部tab的数据进行渲染: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-tab-pane label="菜系2"><div class="recipe-link"><router-link :to="{}" class="active">分类1</router-link><router-link :to="{}">分类2</router-link><router-link :to="{}">分类3</router-link></div></el-tab-pane><el-tab-pane label="菜系3"><div class="recipe-link"><router-link :to="{}" class="active">分类1</router-link><router-link :to="{}">分类2</router-link><router-link :to="{}">分类3</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 of 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[option.title]===option.type}">{{option.name}}</el-tag></div></el-collapse-item><!-- <el-collapse-itemtitle="筛选项2"><div class="filter-tags"><el-tag type="info"></el-tag></div></el-collapse-item><el-collapse-itemtitle="筛选项3"><div class="filter-tags"><el-tag type="info"></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:{}, //储存属性的分类propertiesActivName:[],  //记录所有的属性分类//储存右侧主体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.getMenus() },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;this.$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)=>{o[item.title]=query[item.title] ? query[item.title]: "";if(o[item.title]){this.propertiesActivName.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})},getMenus(){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...",spinnerL:"el-icon-loading",background:"rgba(0,0,0,0.7)"})})this.list=[]//请求右侧数据getMenus(params).then(({data})=>{if(this.loading) loading.close();//  console.log(data)this.list=data.list;this.total =data.total;this.page = data.current_page;this.loading=false;})},//改变当前页码handlerSelect(){//    console.log("改变页码")this.$router.push({query:{...this.$route.query,page:this.page}})},tabClick(){const classifyName = this.classifyNameconst item = this.classify.find(item=>item.parent_type===classifyName)//    console.log(item)//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-selectedbackground-color #ff3232color #fff.menu-emptywidth 100%text-align centerfont-size 20px
</style>

能力不足不能进行详细的介绍真是抱歉随便看看吧

拜拜下次见

美食杰项目（菜谱大全）效果介绍相关推荐

vue——超详细的美食杰项目—菜谱大全
vue--超详细的美食杰项目-菜谱大全效果介绍 1.家常菜谱Tab切换: 2.筛选: 效果介绍下面我们实现的效果就是图一中的.点击'家常菜谱'下的其中一项时背景颜色改变并向路由中显示参数.在点击' ...
美食杰项目----菜谱大全
美食杰项目----菜谱大全实现效果介绍: 点击菜谱tab切换,类似于一个二级菜单当他点击家常菜切换颜色,当它刷新的时候颜色不会掉点击工艺,口味切换,也类似于一个二级菜单当点击"炒&q ...
美食杰项目 -- 菜谱大全（二）
目录前言: 具体实现思路: 步骤: 1. 展示美食杰菜谱大全效果 2. 引入element-ui 3. 代码总结: 前言: 本文给大家讲解,美食杰项目中菜谱大全实现的效果,和具体代码. 具体实现思 ...
VUE——超详细的美食杰项目—菜谱详情
VUE--超详细的美食杰项目-菜谱详情效果介绍 detail.vue detail-header.vue detail-content.vue comment.vue 效果介绍实现页面数据渲染,还 ...
美食杰实现菜谱大全功能
1.效果展示 1.1需要实现的效果 1.先进行数据渲染 2.点击家常菜谱跳转对应的路由 3.点击当前添加对应的背景颜色 2.在recipe.vue页中写 <div class="rec ...
美食杰项目 -- 发布菜谱（七）
目录前言: 具体实现思路: 步骤: 1. 展示美食杰发布菜谱页效果 2. 引入element-ui 3. 代码总结: 前言: 本文给大家讲解,美食杰项目中实现发布菜谱页的效果,和具体代码. 具体 ...
美食杰项目 -- 总结（八）
目录前言: 项目效果展示引入插件说明后台请求代码编写 package.json页面代码 main.js页面代码总结前言: 经过大概一周时间的兴勤劳作,美食杰项目的所有代码已经全部编写完成,功 ...
美食杰项目（七）菜谱大全
本文目录前言: 1.具体样式 2.实现的具体功能和代码思路 3.element ui具体样式的网址 4.相关代码 5.总结: 前言: 本文给大家讲的是美食杰项目中菜谱大全项目的具体样式,代码思路和具 ...
美食杰项目（六）发布菜谱
目录前言具体效果实现的具体功能代码思路主要引入的element ui的具体样式相关代码总结: 前言本节给大家讲的是美食杰项目的发布菜谱的主要功能和具体样式,希望我的代码能够帮助到你,也 ...
vue项目美食杰 -- 发布菜谱
不知不觉间,vue美食杰项目已经实现了很多了,我都有点始料未及呢,今天进行的部分呢,是项目中的发布菜谱功能,在这个页面中,我们会学习到前后端的交互,Element-ui的使用等等... 先看下效果图: ...