技术文档

Appearance

侧边菜单头部栏 ​

app.vue ​

vue

<template>
  <div class="common-layout" style="overflow: hidden;">
    <el-container>
      <el-aside    :width="asideWidth"  
         style="transition: width 0.1s; overflow: hidden;   "  >
        <Menu :is-collapse="isCollapse"  style="height:97vh;"></Menu>
      </el-aside>
      <el-container>
        <el-header style=" height: 48px;  ;" ><Head   @send-message="handleMessage" ></Head></el-header>
        <el-main style="background-color: #f6f8fc;   ">

           <el-row  ><el-col :span="24"  style="  "><RouterView /></el-col></el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template> 
<script lang="ts" setup>
import Menu from './components/Nav/Menu.vue';

import Head from './components/Nav/Head.vue';

import { ref } from 'vue'; 
import { el } from 'element-plus/es/locales.mjs';


const isCollapse = ref();
const asideWidth = ref('200px');

const handleMessage = (message: boolean) => {
   isCollapse.value = message;
  console.log(message);
  asideWidth.value = message ? '64px' : '200px';
};
</script>
<style lang="css">
 
</style>

head.vue ​

vue
<template> 
 <el-row  style=" height: 48px;  " >
    <el-col :span="1"  style=" align-items: center;justify-content: center;display: flex;" >
      <el-icon 
        :size="20" 
        @click="sendMessage" 
        style="cursor: pointer; margin-right: 12px;"
      >
        <component :is="isCollapse ? 'Expand' : 'Fold'" />
      </el-icon>
    </el-col>

    
    <el-col  :span="3"  :offset="20" >
      <el-dropdown placement="bottom"  class="head-el-dropdown"> 
        <div  class="center  "  >
      <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
       > 
      </el-avatar> 
      南宫千余速</div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>个人页面</el-dropdown-item>
          <el-dropdown-item>退出登录</el-dropdown-item> 
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

import { House, Setting, Fold, Expand } from '@element-plus/icons-vue'


const isCollapse = ref(false);
 
const emit = defineEmits(['send-message']);


// 2. 当按钮被点击时，触发 'send-message' 事件，并将 inputText 的值作为数据传递
const sendMessage = () =>  {
  isCollapse.value = !isCollapse.value;
  emit('send-message', isCollapse.value);
}

 
</script> 
<style scoped>
.el-col {
  align-items: center;justify-content: center;display: flex; 
  /* background-color: red; */
}
 
 :deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}
</style>
vue
<template>
    <el-row class="tac"     style="height: 100%;">

    <el-col :span="24" height="100%" style="height: 100%;">
         <div style="height: 48px;background-color: #304156;
    border-right: solid 1px var(--el-menu-border-color);"  class="center">323</div>
        <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo" 
        text-color="#fff"
        :collapse="isCollapse"
        :collapse-transition="false"
        @open="handleOpen"
        @close="handleClose"
        height="100%"
        style="height: 100%;"
        router
        :default-active="$route.path"
        > 
            <el-sub-menu index="1">
                <template #title> 
                    <el-icon><User /></el-icon>
                    <span>用户管理</span>
                </template>
                    <el-menu-item index="/user">用户管理</el-menu-item>  
            </el-sub-menu>   
            <el-sub-menu index="2">
                <template #title> 
                    <el-icon><Setting /></el-icon>
                    <span>测试管理</span>
                </template>
                    <el-menu-item index="/Text">测试管理</el-menu-item>  
            </el-sub-menu>  
        </el-menu>
    </el-col>
    </el-row>
</template>

<script lang="ts" setup>

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

import { ref } from 'vue';


 defineProps<{ 
   "isCollapse": string
 }>() 


const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

 


</script>