vite+vue+ts+element-plus从零开发管理后台框架(13)-个人信息

mirahs

于 2025-03-05 16:30:53 发布

阅读量263

点赞数 8

分类专栏： vite+vue+ts+element从零开发管理后台框架文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/mirahs/article/details/146046550

版权

vite+vue+ts+element从零开发管理后台框架专栏收录该内容

23 篇文章

订阅专栏

编辑src/views/Main.vue，template段header-right修改如下。

<div class="header-right">
    <el-dropdown trigger="click" @command="handleUserCommand">
        <span class="user-info">
            <el-icon class="el-icon--left">
                <user />
            </el-icon>
            admin
            <el-icon class="el-icon--right">
                <arrow-down />
            </el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="info">个人信息</el-dropdown-item>
                <el-dropdown-item command="password">修改密码</el-dropdown-item>
                <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</div>

script段引入并实例化router，再添加handleUserCommand方法处理下拉菜单按钮事件。

import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import * as MenuUtil from '@/util/menu'
import useMenuStore from '@/store/menu'


const route = useRoute()
const router = useRouter()

const menuStore = useMenuStore()

const onCollapseSwitch = () => {
    menuStore.collapse = !menuStore.collapse
}

const handleUserCommand = (command: string) => {
    if (command == 'info') {
        router.push('/Home')
    } else if (command == 'password') {
        router.push('/sys/AdmUserPassword')
    } else if (command == 'logout') {
        // 清空登录相关信息
        router.push('/login')
    }
}

style段header-right修改如下

.header-right {
    display: flex;
    align-items: center;

    .user-info {
        margin-right: 15px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
}