vue3 element-plus,菜单栏如果有登录信息,显示用户名,没有登录,显示请登录
时间: 2023-08-18 13:10:03 浏览: 57
可以通过下面的代码实现该功能:
```html
<template>
<div>
<el-menu>
<el-menu-item>首页</el-menu-item>
<el-menu-item>产品</el-menu-item>
<el-submenu v-if="isLogin">
<template slot="title">{{ username }}</template>
<el-menu-item>个人中心</el-menu-item>
<el-menu-item>退出登录</el-menu-item>
</el-submenu>
<el-menu-item v-else>请登录</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
isLogin: false,
username: ''
}
},
created() {
// 判断用户是否已登录,如已登录则设置 isLogin 为 true,并获取用户名
if (已登录) {
this.isLogin = true
this.username = 用户名
}
}
}
</script>
```
在上面的代码中,我们使用了一个变量 `isLogin` 来表示用户是否已登录,如果已登录则设置为 `true`,否则为 `false`。同时,我们使用了一个变量 `username` 存储用户名。
在模板中,我们使用了 `v-if` 条件语句来判断是否显示子菜单。如果用户已登录,则显示子菜单,并在标题处显示用户名,否则直接在菜单项上显示 “请登录” 信息。
在 `created` 钩子函数中,我们可以通过某种方式判断用户是否已登录,并获取用户名。这里的判断方法需要根据具体情况而定。