mirror of
https://github.com/fugary/simple-element-plus-template.git
synced 2025-11-12 14:27:49 +00:00
基础element-plus模板项目
This commit is contained in:
Gary Fu
@@ -2,8 +2,9 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
'extends': [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended'
|
||||
'plugin:vue/vue3-recommended',
|
||||
'eslint:recommended',
|
||||
'@vue/eslint-config-standard'
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest'
|
||||
|
||||
1180
package-lock.json
generated
1180
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -15,7 +15,9 @@
|
||||
"vue-router": "^4.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.2.0",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"@vue/eslint-config-standard": "^8.0.1",
|
||||
"eslint": "^8.34.0",
|
||||
"eslint-plugin-vue": "^9.9.0",
|
||||
"vite": "^4.1.4"
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ app.use(router)
|
||||
app.use(ElementPlus)
|
||||
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
app.component(key, component)
|
||||
}
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
@@ -1,19 +1,23 @@
|
||||
<script setup>
|
||||
import LeftMenu from "@/components/LeftMenu.vue";
|
||||
import TopNav from "@/components/TopNav.vue";
|
||||
import LeftMenu from '@/components/LeftMenu.vue'
|
||||
import TopNav from '@/components/TopNav.vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const collapseLeft = ref(false)
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-container class="index-container">
|
||||
<el-header>
|
||||
<top-nav/>
|
||||
</el-header>
|
||||
<el-aside>
|
||||
<left-menu v-model:collapse-left="collapseLeft" />
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-aside>
|
||||
<left-menu/>
|
||||
</el-aside>
|
||||
<el-header>
|
||||
<top-nav v-model:collapse-left="collapseLeft" />
|
||||
</el-header>
|
||||
<el-main>
|
||||
<router-view/>
|
||||
<router-view />
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
Reference in New Issue
Block a user