项目中遇到的问题分析

高阶组件

Component 在 router 变化的时候自动会给 router-view 把对应的组件传进来，v-slot 做为传输入口，把组件传进来，用 component :is 来动态化显示对应组件

<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <transition name="zoom-fade" modetransition="out-in" appear>
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

那组件本身在哪引入的？

const route = {
  path: '/workbench',
  name: '工作台',
  meta: {
    icon: 'gongzuotai',
    title: '工作台'
  },
  component: () => import('@/views/workbench/index.vue'),
}

图片等比例缩放 object-fit: contain;

.mc_list li .mc_img {    //容器
    height: 214px;
    background: #F3F4F5;
    }
 img{
    width: 100%;
    height: 100%;
    object-fit: contain;   图片等比例缩放
    }

element plus中的checkbox不显示lable的文字，

用 <br/>

  <el-checkbox-group
   v-model="checkedAdmins"
         @change="handleCheckedCitiesChange"
    >
     <el-checkbox :key="item.Id" :label="item.Id">
            <br/>
         </el-checkbox>
    </el-checkbox-group>

vue3中 solt 有些不需要显示用 v-if="$slots.XXX"

<div class="m_add" v-if="$slots.addList">
     <em class="iconfont icon-jiahao"></em>
            <slot name="addList">
                添加栏目
            </slot>
        </div>