美食杰-菜谱大全

一、介绍

菜谱大全通过element组件进行渲染，实现了tab切换和下拉列表效果。

 二、过程

首先导入api，在data里面创建需要用到的属性。

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

data

data() {
            return {
                classify:[],//存储tab切换的所有数据
                classifyType:'1-1',//tab切换的选中项(二级路由)
                classifyName:'1',//定义刷新tab的值(一级路由)
                // 属性
                properties:[],//存储属性中的所有数据
                properType:{},//存储属性的分类。例如：{craft:1-4,flavor:2-2,hard:3-4,people:4-3}
                propertiesActivName:[]
            }
        },

开始实现的是菜谱分类，首先通过getClassify调用后端获取数据，使用element里面的标签页进行渲染。并且判断它路由里的query是否有classify，如果没有通过push添加，是classify值为一，具体表现为一级路由家常菜谱，二级路由选中家常菜。在最外层通过v-model绑定classifyName同步当前的一级路由。通过遍历获取到的数据classify渲染一级路由，获取到数据item。接着通过遍历item下的list渲染二级路由，获取到数据option。在二级路由里面绑定一个动态的class，当classifyType和某个二级路由的type相等时，给他创建一个active的class，实现高亮显示：

getClassify().then(({data})=>{
                this.classify=data
                if(!this.$route.query.classify){
                    this.classifyType=this.classify[0].list[0].type
                    this.classifyName=this.classify[0].parent_type
                    this.$router.push({
                        query:{
                            classify:this.classifyType,
                            page:1
                        }
                    })
                }
            });

渲染：

<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:{...$route.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>

监听路由，通过this.$route.query获取到里面的classify，判断classify是否有值，若果有的话把classify赋值给classifyType。把classify[0]赋值给classifyName：

watch: {
            $route: {
                handler(){
                    const {classify}=this.$route.query
                    if(classify){
                        this.classifyType=classify
                        this.classifyName=classify[0]
                    }
                    this.ThisgetMenus()
                },
                immediate:true
            }
        },

接下来是下拉列表首先是通过getProperty调用后端获取数据，把数据赋值给properties。然后通过reduce方法把所有属性的分类赋值给properType。通过element组件渲染：

getProperty().then(({data})=>{
                this.properties=data
                const {query}=this.$route
                console.log(this.properties);
                this.properType=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
                },{})
            })

渲染：

 <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-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':properType[option.title]===option.type}">{{option.name}}</el-tag>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                    <!-- 筛选 end -->
                </div>
            </el-aside>

给属性绑定一个点击事件selectedTag，并把遍历得到的数据option当做实参传递。判断属性是否点击过，如果点击过取消高亮显示，没有电击过，添加高亮显示。

selectedTag(option){
               let query={...this.$route.query}
            // 判断是否点击，如果点击过，取消、否则选中
               if(this.properType[option.title]==option.type){
                   this.properType[option.title]=''
                   delete query[option.title]
               }else{
                   this.properType[option.title]=option.type
                   query[option.title]=option.type
               }
               
               this.$router.push({
                   query
               })
            },

总结：

到这里就介绍完了，祝大家生活愉快！