cirry/simple-element-plus-template
1
0
Fork 0
mirror of https://github.com/fugary/simple-element-plus-template.git synced 2025-12-10 04:47:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

基础element-plus模板项目

Browse Source
This commit is contained in:
Gary Fu
2023-05-01 17:43:01 +08:00
parent 84e0065559
commit 8e79475ea2
7 changed files with 1297 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/LeftMenu.vue
View File

@@ -1,30 +1,42 @@
<template>
<el-scrollbar>
<el-menu :default-openeds="['1']">
<el-menu
:collapse="collapseLeft"
:default-openeds="['1']"
>
<el-menu-item index="0">
SIMPLE Element Plus
</el-menu-item>
<el-sub-menu index="1">
<template #title>
<el-icon><setting /></el-icon>系统管理
</template>
<el-menu-item index="1-1">
<el-icon><user/></el-icon>用户管理
</el-menu-item>
<el-menu-item index="1-2">
<el-icon><Menu/></el-icon>角色管理
</el-menu-item>
<el-menu-item index="1-3">
<el-icon><lock/></el-icon>权限管理
</el-menu-item>
<el-menu-item index="1-4">
<el-icon><Menu/></el-icon>菜单管理
</el-menu-item>
<el-menu-item index="1-1">
<el-icon><user /></el-icon>用户管理
</el-menu-item>
<el-menu-item index="1-2">
<el-icon><Menu /></el-icon>角色管理
</el-menu-item>
<el-menu-item index="1-3">
<el-icon><lock /></el-icon>权限管理
</el-menu-item>
<el-menu-item index="1-4">
<el-icon><Menu /></el-icon>菜单管理
</el-menu-item>
</el-sub-menu>
<el-sub-menu index="2">
<template #title>
<el-icon><WarningFilled /></el-icon>错误页面
</template>
<el-menu-item index="1-1"><el-icon><Warning /></el-icon>客户端错误</el-menu-item>
<el-menu-item index="1-2"><el-icon><Warning /></el-icon>没有权限页面</el-menu-item>
<el-menu-item index="1-3"><el-icon><Warning /></el-icon>服务器错误</el-menu-item>
<el-menu-item index="1-1">
<el-icon><Warning /></el-icon>客户端错误
</el-menu-item>
<el-menu-item index="1-2">
<el-icon><Warning /></el-icon>没有权限页面
</el-menu-item>
<el-menu-item index="1-3">
<el-icon><Warning /></el-icon>服务器错误
</el-menu-item>
</el-sub-menu>
</el-menu>
</el-scrollbar>
@@ -32,10 +44,14 @@
<script>
export default {
name: "LeftMenu"
name: 'LeftMenu',
props: {
collapseLeft: {
type: Boolean
}
}
}
</script>
<style scoped>
</style>
</style>

79
src/components/TopNav.vue
View File

@@ -1,32 +1,79 @@
<template>
<el-menu
mode="horizontal"
:ellipsis="false">
<el-menu-item index="0">SIMPLE EP</el-menu-item>
mode="horizontal"
:ellipsis="false"
>
<el-menu-item @click="updateCollapseLeft">
<el-icon v-if="!isCollapseLeft">
<Fold />
</el-icon>
<el-icon v-if="isCollapseLeft">
<Expand />
</el-icon>
</el-menu-item>
<div class="flex-grow" />
<el-sub-menu index="1">
<template #title>语言</template>
<el-menu-item index="2-1">中文</el-menu-item>
<el-menu-item index="2-2">英文</el-menu-item>
<template #title>
语言
</template>
<el-menu-item index="2-1">
中文
</el-menu-item>
<el-menu-item index="2-2">
英文
</el-menu-item>
</el-sub-menu>
<el-sub-menu index="2">
<template #title>主题</template>
<el-menu-item index="2-1">默认</el-menu-item>
<el-menu-item index="2-2">黑色</el-menu-item>
<el-menu-item index="2-3">紫色</el-menu-item>
<template #title>
主题
</template>
<el-menu-item index="2-1">
默认
</el-menu-item>
<el-menu-item index="2-2">
黑色
</el-menu-item>
<el-menu-item index="2-3">
紫色
</el-menu-item>
</el-sub-menu>
<el-sub-menu index="3">
<template #title>个人中心</template>
<el-menu-item index="2-4-1">个人资料</el-menu-item>
<el-menu-item index="2-4-2">关于</el-menu-item>
<el-menu-item index="2-4-3">退出</el-menu-item>
<template #title>
个人中心
</template>
<el-menu-item index="2-4-1">
个人资料
</el-menu-item>
<el-menu-item index="2-4-2">
关于
</el-menu-item>
<el-menu-item index="2-4-3">
退出
</el-menu-item>
</el-sub-menu>
</el-menu>
</template>
<script>
export default {
name: "TopNav"
name: 'TopNav',
props: {
collapseLeft: {
type: Boolean
}
},
data () {
const isCollapseLeft = this.$props.collapseLeft
return {
isCollapseLeft
}
},
methods: {
updateCollapseLeft () {
this.isCollapseLeft = !this.isCollapseLeft
this.$emit('update:collapseLeft', this.isCollapseLeft)
}
}
}
</script>
@@ -34,4 +81,4 @@ export default {
.flex-grow {
flex-grow: 1;
}
</style>
</style>