美食杰项目--菜谱大全二

美食杰项目–菜谱大全二

实现效果：

1. 点击“炒”，“蒸”等让数据显示出来
2. 数据比较多的时候分页的效果
3. 每次显示5条数据
4. 每次加载时有loading遮罩层加载

效果图展示

出现遮罩层的效果

1.点击时让对应的数据显示出来，这里运用到elmentUI

elementUI点击此处跳转具体查看
:info="list"所需要打的数据
:current-page.sync="page"当前页数
@current-change="handlerSelect"点击改变触发

 <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-pagination
                            style="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>

2.分页效果存储的数据

从import {getMenus} from '@/service/api';中获取数据
在data中定义数据

export default {
        components: {MenuCard},
        data() {
            return {
                // 存储右侧主体
                list:[],
                total:0, //总页数
                loading:false, //是否显示遮罩层
                page:1,
                
            }
        },

3.分页效果

• getMenus()中页码默认值为“1”
• 调用后端请求数据，把请求的数据放在list中，每次加载5条数据
• handlerSelect() 点击谁存到路由中
• 在加载loading是子显示遮罩层

       methods: {
      
           getMenus(){
               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:'rgb(0,0,0,0.7)'
                   })
                   
               });
               this.list=[];
               //请求右侧数据
               getMenus(params).then(({data})=>{
                   if(this.loading) loading.close();
                   this.loading=false;
                //   console.log(data)
                  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
                      }
                  })
                }
            }
   }