chengfei-test-system/src/views/main/components/header.vue

<template>
  <div class="main-header">
    <div class="main-logo">
      <img src="@/assets/logo.png" alt="" />
      <span>维修检测平台</span>
    </div>
    <div class="main-user" ref="buttonRef" @click="onClickOutside">
      <span class="user-name">李明华</span>
      <img src="@/assets/logo.png" alt="" />
    </div>
    <el-popover
      :teleported="false"
      ref="popoverRef"
      :virtual-ref="buttonRef"
      trigger="click"
      title=""
      virtual-triggering
    >
      <div class="loginOut" @click="loginOutFun">退出登录</div>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import { ref, unref } from "vue";
import { ClickOutside as vClickOutside } from "element-plus";

const buttonRef = ref();
const popoverRef = ref();
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.();
};
const loginOutFun = () => {
  alert("退出登录");
  // window.location.href = "/login";
};
</script>

<style scoped lang="scss">
.main-header {
  width: 100%;
  height: $main-header-height;
  background-color: $hj-white-1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;

  ::v-deep .el-popper {
    .loginOut {
      cursor: pointer;
    }
  }

  .main-logo {
    img {
      vertical-align: middle;
      width: 36px;
      height: 36px;
    }

    span {
      font-size: var(--hj-fs-16);
      color: var(--fc-color-3);
    }
  }

  .main-user {
    cursor: pointer;

    img {
      vertical-align: middle;
      width: 18px;
      height: 20px;
    }

    .user-name {
      margin-right: 10px;
      font-size: var(--hj-fs-14);
      color: var(--fc-color-4);
    }
  }
}
</style>