test-web/src/layout/components/Head.vue

<template>
  <!-- 头部选项 -->
  <div class="as-gravity-center-start" style=" height: 100%">
    <!-- 图标部分 -->
    <div class="as-weight">
      <el-icon size="24px" color="#FFFFFF" @click="cut">
        <fold v-if="menuStart.menuIsExpansion" />
        <expand v-if="!menuStart.menuIsExpansion" />
      </el-icon>
    </div>
    <!-- 我的部分 -->
    <div class="as-gravity-center-start" style="height: 100%">
      <!-- 搜索 -->
      <search id="header-search" />
      <!-- 全屏 -->
      <el-icon @click="fullScreen" style="margin: 0px 20px 0px 20px" size="24px" color="#FFFFFF">
        <FullScreen />
      </el-icon>
      <!-- 弹出框提示 -->
      <el-popover v-model:visible="visible" placement="bottom" :width="160">
        <div class="as-layout-vertical">
          <el-button type="text" @click="hint('个人中心')" class="as-text-14px" style="width: 100%;">个人中心</el-button>
          <el-button type="text" @click="hint('退出登录')" class="as-text-14px" style="margin-right: 10px;">退出登录</el-button>
        </div>
        <template #reference>
          <!-- 头像 -->
          <div style="margin-left: 20px">
            <el-avatar @click="visible = !visible" shape="square" :size="40" src="/logo2.png" />
          </div>
        </template>
      </el-popover>
      <!-- 设置 -->
      <el-icon @click="hint('点击了设置')" style="margin: 0px 30px 0px 30px" size="24px" color="#FFFFFF">
        <setting />
      </el-icon>
    </div>

  </div>
</template>
<script setup lang="ts">
  import screenfull from "screenfull" //引入全屏依赖
  import ImgHead from '@/assets/image/head.png' //默认头像资源
  import $store from "@/store/index" // 引入vuex
  import Search from '@/components/HeaderSearch/index.vue' //搜索组件
  import {
    ref,
    reactive,
    nextTick
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import {
    ElMessage
  } from 'element-plus' //消息提示
  import Cookies from 'js-cookie'
  const visible = ref(false)
  const router = useRouter()
  let menuStart = reactive($store.state.data) //菜单开关
  //切换菜单开关监听
  function cut() {
    $store.dispatch('cutMenu', !menuStart.menuIsExpansion)
  }
  //全屏监听
  function fullScreen() {
    screenfull.toggle()
  }
  //提示点击
  function hint(msg) {
    if (msg === '退出登录') {
      Cookies.remove('token')
      Cookies.remove('rememberPSWD')
      Cookies.remove('account')
      Cookies.remove('password')
      router.replace('/')
      location.reload()
    } else {
      ElMessage({
        message: msg,
        type: 'success'
      })
    }

  }
</script>
<style lang="scss" scoped>

</style>