发布于2022-11-19 06:37 阅读(863) 评论(0) 点赞(21) 收藏(5)
创建client/src/components/HeadNav.vue
顶部导航栏组件:
<template> <header class="head-nav"> <el-row> <el-col :span="6" class="logo-container"> <img src="../assets/logo.png" class="logo" alt="" /> <span class="title">马马虎虎资金管理系统</span> </el-col> <el-col :span="6" class="user"> <div class="userinfo"> <img src="user.avatar" class="avatar" alt="" /> <div class="welcome"> <p class="name comename">欢迎</p> <p class="name avatarname">褪色者</p> </div> <span class="username"> <!--下拉菜单--> </span> </div> </el-col> </el-row> </header> </template> <script> export default { name: "head-nav" }; </script> <style scoped> .head-nav { width: 100%; height: 60px; min-width: 600px; padding: 5px; background: #324057; color: #fff; border-bottom: 1px solid #1f2d3d; } .logo-container { line-height: 60px; min-width: 400px; } .logo { height: 50px; width: 50px; margin-right: 5px; vertical-align: middle; display: inline-block; } .title { vertical-align: middle; font-size: 22px; font-family: "Microsoft YaHei"; letter-spacing: 3px; } .user { line-height: 60px; text-align: right; float: right; padding-right: 10px; } .avatar { width: 40px; height: 40px; border-radius: 50%; vertical-align: middle; display: inline-block; } .welcome { display: inline-block; width: auto; vertical-align: middle; padding: 0 5px; } .name { line-height: 20px; text-align: center; font-size: 14px; } .comename { font-size: 12px; } .avatarname { color: #409eff; font-weight: bolder; } .username { cursor: pointer; margin-right: 5px; } .el-dropdown { color: #fff; } </style>
在Index.vue
中引入顶部导航栏组件:
<template>
<div class="index">
<HeadNav></HeadNav>
</div>
</template>
<script>
import HeadNav from "../components/HeadNav"
export default {
name: 'index',
components: {
HeadNav
}
};
</script>
编辑HeadNav.vue
,利用Element-ui创建下拉菜单:
<span class="username">
<!--下拉菜单-->
<el-dropdown trigger="click" @command="setDialogInfo">
<span class="el-dropdown-link">
<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="info">个人信息</el-dropdown-item>
<el-dropdown-item command="logout">退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
编辑HeadNav.vue
,通过Vuex获取存储的用户token,在导航栏展示用户名和头像。
<template> <header class="head-nav"> <el-row> <el-col :span="6" class="logo-container"> <img src="../assets/logo.png" class="logo" alt="" /> <span class="title">马马虎虎资金管理系统</span> </el-col> <el-col :span="6" class="user"> <div class="userinfo"> <img :src="user.avatar" class="avatar" alt="" /> <div class="welcome"> <p class="name comename">欢迎</p> <p class="name avatarname">{{user.name}}</p> </div> <span class="username"> <!--下拉菜单--> <el-dropdown trigger="click" @command="setDialogInfo"> <span class="el-dropdown-link"> <i class="el-icon-caret-bottom el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="info">个人信息</el-dropdown-item> <el-dropdown-item command="logout">退出</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </span> </div> </el-col> </el-row> </header> </template> <script> export default { name: "head-nav", computed: { user() { return this.$store.getters.user; } } }; </script>
编辑client/src/store/index.js
,定义下拉菜单中退出时清除登录状态使用的actions
:
const actions = {
setAuthenticated: ({ commit }, isAuthenticated) => {
commit(types.SET_AUTHENTICATED, isAuthenticated);
},
setUser: ({ commit }, user) => {
commit(types.SET_USER, user);
},
clearCurrentState: ({ commit }) => {
commit(types.SET_AUTHENTICATED, false);
commit(types.SET_USER, null);
}
};
在HeadNav.vue
中定义点击下拉菜单退出时使用的logout
方法:
<script> export default { name: "head-nav", computed: { user() { return this.$store.getters.user; } }, methods: { setDialogInfo(cmdItem) { //console.log(cmdItem); switch (cmdItem) { case "info": this.showInfoList(); break; case "logout": this.logout(); break; } }, showInfoList() { console.log("个人信息"); }, logout() { //清除token localStorage.removeItem('eleToken'); //设置Vuex store this.$store.dispatch('clearCurrentState'); //跳转到登录页面 this.$router.push('/login'); } } }; </script>
原文链接:https://blog.csdn.net/Sebastien23/article/details/125524741
作者:西门费雪
链接:http://www.qianduanheidong.com/blog/article/455460/b2d691c0cbcca569054e/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!