VueSlot --笔记

具名插槽 dropSlot

//chacaodemo.vue
<template>
  <slot name="dropDisaster">
    <el-dropdown>
    <span class="el-dropdown-link" style="color: #fff;">
      {{disaster.type}}
      <el-icon class="el-icon--right">
        <ArrowDown />
      </el-icon>
    </span>
      <template #dropdown>
        <el-dropdown-menu style="color: #fff">
          <el-dropdown-item>{{disaster.functionOne}}</el-dropdown-item>
          <el-dropdown-item>{{disaster.functionTwo}}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </slot>
</template>

<script>
import { ArrowDown } from '@element-plus/icons-vue'
export default {
  name: "dropSlot",
  props: ['disaster'],
  components:{
    ArrowDown
  }
}
</script>

<style scoped lang="scss">
  .example-showcase .el-dropdown-link {
    cursor: pointer;
    display: flex;
    align-items: center;
  }
</style>

menuBar 组件调用

<template>
  <div class="all">
    <div class="logoImg">
      <div>我是图标Logo位置</div>
    </div>
    <div class="menuList">
      <ul>
        <li>
          <a href="#">首页</a>
        </li>
        <li>
          <dropSlot :disaster="disasterOne">
            <template #dropDisaster></template>
          </dropSlot>
        </li>
        <li>
          <dropSlot :disaster="disasterTwo">
            <template #dropDisaster></template>
          </dropSlot>
        </li>
        <li>
          <dropSlot :disaster="disasterThree">
            <template #dropDisaster></template>
          </dropSlot>
        </li>
        <li>
          <dropSlot :disaster="disasterFour">
            <template #dropDisaster></template>
          </dropSlot>
        </li>
        <li>
          <dropSlot :disaster="disasterFive">
            <template #dropDisaster></template>
          </dropSlot>
        </li>
      </ul>
    </div>
    <div class="userManage">
      <ul>
        <li>
          <a href="#">注册</a>
        </li>
        <li>
          <a href="#">登录</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import dropSlot from "./dropSlot.vue";

export default {
  name: "menuBar",
  components:{
    dropSlot
  },
  data(){
    return{
      disasterOne: {
        type: '洪涝',
        functionOne: '可视化实例',
        functionTwo: '应急模拟'
      },
      disasterTwo: {
        type: '地震',
        functionOne: '可视化实例',
        functionTwo: '应急模拟'
      },
      disasterThree: {
        type: '火灾',
        functionOne: '可视化实例',
        functionTwo: '应急模拟'
      },
      disasterFour: {
        type: '泥石流',
        functionOne: '可视化实例',
        functionTwo: '应急模拟'
      },
      disasterFive: {
        type: '传染病',
        functionOne: '可视化实例',
        functionTwo: '应急模拟'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.all{
  width: 100%;
  height: 100%;
  color: whitesmoke;
  font-size: 14px;
  position: relative;
  display: flex;
  flex-direction: row;
  .logoImg{
    height: 100%;
    width: 15%;
    background-color: firebrick;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .menuList{
    width: 70%;
    height: 100%;
    ul{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      li{
        margin-left: 35px;
        list-style: none;
        a{
          text-decoration: none;
          color: #00BCFF;
        }
      }
    }
  }
  .userManage{
    height: 100%;
    width: 15%;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    ul{
      width: 100%;
      color: #fff;
      li{
        list-style: none;
        display: inline;
        margin-left: calc((100% - 56px)/3);
        font-weight: bolder;
        a{
          text-decoration: none;
          color: #fff;
        }
        a:hover{
          color: #428bca;
        }
      }
    }
  }
}
</style>