cirry/simple-element-plus-template
1
0
Fork 0
mirror of https://github.com/fugary/simple-element-plus-template.git synced 2025-12-31 03:17:49 +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

5
.eslintrc.cjs
View File

@@ -2,8 +2,9 @@
module.exports = { module.exports = {
root: true, root: true,
'extends': [ 'extends': [
'plugin:vue/vue3-essential', 'plugin:vue/vue3-recommended',
'eslint:recommended' 'eslint:recommended',
'@vue/eslint-config-standard'
], ],
parserOptions: { parserOptions: {
ecmaVersion: 'latest' ecmaVersion: 'latest'

1180
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -15,7 +15,9 @@
"vue-router": "^4.1.6" "vue-router": "^4.1.6"
}, },
"devDependencies": { "devDependencies": {
"@rushstack/eslint-patch": "^1.2.0",
"@vitejs/plugin-vue": "^4.0.0", "@vitejs/plugin-vue": "^4.0.0",
"@vue/eslint-config-standard": "^8.0.1",
"eslint": "^8.34.0", "eslint": "^8.34.0",
"eslint-plugin-vue": "^9.9.0", "eslint-plugin-vue": "^9.9.0",
"vite": "^4.1.4" "vite": "^4.1.4"

54
src/components/LeftMenu.vue
View File

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

79
src/components/TopNav.vue
View File

@@ -1,32 +1,79 @@
<template> <template>
<el-menu <el-menu
mode="horizontal" mode="horizontal"
:ellipsis="false"> :ellipsis="false"
<el-menu-item index="0">SIMPLE EP</el-menu-item> >
<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" /> <div class="flex-grow" />
<el-sub-menu index="1"> <el-sub-menu index="1">
<template #title>语言</template> <template #title>
<el-menu-item index="2-1">中文</el-menu-item> 语言
<el-menu-item index="2-2">英文</el-menu-item> </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>
<el-sub-menu index="2"> <el-sub-menu index="2">
<template #title>主题</template> <template #title>
<el-menu-item index="2-1">默认</el-menu-item> 主题
<el-menu-item index="2-2">黑色</el-menu-item> </template>
<el-menu-item index="2-3">紫色</el-menu-item> <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>
<el-sub-menu index="3"> <el-sub-menu index="3">
<template #title>个人中心</template> <template #title>
<el-menu-item index="2-4-1">个人资料</el-menu-item> 个人中心
<el-menu-item index="2-4-2">关于</el-menu-item> </template>
<el-menu-item index="2-4-3">退出</el-menu-item> <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-sub-menu>
</el-menu> </el-menu>
</template> </template>
<script> <script>
export default { 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> </script>
@@ -34,4 +81,4 @@ export default {
.flex-grow { .flex-grow {
flex-grow: 1; flex-grow: 1;
} }
</style> </style>

2
src/main.js
View File

@@ -16,7 +16,7 @@ app.use(router)
app.use(ElementPlus) app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component) app.component(key, component)
} }
app.mount('#app') app.mount('#app')

22
src/views/HomeView.vue
View File

@@ -1,19 +1,23 @@
<script setup> <script setup>
import LeftMenu from "@/components/LeftMenu.vue"; import LeftMenu from '@/components/LeftMenu.vue'
import TopNav from "@/components/TopNav.vue"; import TopNav from '@/components/TopNav.vue'
import { ref } from 'vue'
const collapseLeft = ref(false)
</script> </script>
<template> <template>
<el-container class="index-container"> <el-container class="index-container">
<el-header> <el-aside>
<top-nav/> <left-menu v-model:collapse-left="collapseLeft" />
</el-header> </el-aside>
<el-container> <el-container>
<el-aside> <el-header>
<left-menu/> <top-nav v-model:collapse-left="collapseLeft" />
</el-aside> </el-header>
<el-main> <el-main>
<router-view/> <router-view />
</el-main> </el-main>
</el-container> </el-container>
</el-container> </el-container>