jiaqingjiayi-Web/src/views/layout/header/avatar.vue

<template>
  <el-dropdown>
<span class="el-dropdown-link">
<el-avatar shape="square" :size="40" :src="squareUrl" />
</span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="message">消息通知</el-dropdown-item>
      </el-dropdown-menu >
      <el-dropdown-menu>
        <el-dropdown-item @click="topersonal">个人中心</el-dropdown-item>
      </el-dropdown-menu >
      <el-dropdown-menu>
        <el-dropdown-item @click="logout">安全退出</el-dropdown-item>
      </el-dropdown-menu >
    </template>
  </el-dropdown>
</template>
<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'
import axios from "@/util/axios";
import router from "@/router";
import {ElMessage} from "element-plus";
const store=useStore();
const squareUrl=ref()
const initForm=()=>{
  let userInfoJson = window.sessionStorage.getItem("USER_LOGIN_STATE");

  squareUrl.value=JSON.parse(userInfoJson).avatarUrl
}
initForm();
const logout=async ()=>{
  store.dispatch('logout')
  let res=await  axios.post("/user/logout")
  ElMessage.warning("退出成功");
 // console.log(res)
}
const topersonal= ()=>{
  router.push('/personal')
}
const message= ()=>{
  router.push('/message')
}
</script>

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