提交 04e95ff4 编写于 作者: 小四是个处女座's avatar 小四是个处女座

添加内容

上级 bea2798b
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
# element-nav
# element-navmenu
element 后台管理多级导航
\ No newline at end of file
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### [在线演示地址](https://xiaolannuoyi.github.io/element-navmenu/)
### [vue elementui navmenu 多级导航菜单(水平、垂直)](https://blog.csdn.net/qq_31126175/article/details/81875468#comments).
module.exports = {
presets: [
'@vue/app'
]
}
此差异已折叠。
{
"name": "element-navmenu",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"element-ui": "^2.6.1",
"jquery": "^3.6.0",
"vue": "^2.6.6",
"vue-router": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.5.0",
"@vue/cli-plugin-eslint": "^3.5.0",
"@vue/cli-service": "^3.5.0",
"babel-eslint": "^10.0.1",
"echarts": "^4.1.0",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.5.21"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>element-navmenu</title>
</head>
<body>
<noscript>
<strong>We're sorry but element-navmenu doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div>
<el-menu
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
:default-active="activeIndex"
router
style="min-height:100vh;float:left"
>
<NavMenu :navMenus="menuData" :activeIndex='activeIndex'></NavMenu>
</el-menu>
<router-view style="margin-left:250px"></router-view>
</div>
</template>
<script>
import NavMenu from "./components/NavMenu.vue";
export default {
components: {
NavMenu: NavMenu
},
data() {
return {
activeIndex: 'aa',
menuData: [
{
//一级
entity: {
id: 0,
name: "aa",
icon: "el-icon-circle-plus-outline",
alias: "一级菜单"
}
},
{
//一级
entity: {
id: 1,
name: "systemManage",
icon: "el-icon-circle-plus-outline",
alias: "两级菜单"
},
//二级
childs: [
{
entity: {
id: 3,
name: "authManage",
icon: "el-icon-circle-plus-outline",
alias: "echarts折线图-图例过滤"
}
},
{
entity: {
id: 4,
name: "roleManage",
icon: "el-icon-bell",
alias: "echarts折线图-图例点击",
}
},
{
entity: {
id: 2,
name: "menuManage",
icon: "el-icon-edit",
alias: "菜单管理",
value: "/system/menu"
}
},
{
entity: {
id: 5,
name: "groupManage",
icon: "el-icon-mobile-phone\r\n",
alias: "分组管理",
value: "/system/group"
}
}
]
},
{
//一级
entity: {
id: 6,
name: "userManage",
icon: "el-icon-circle-plus-outline",
alias: "三级菜单"
},
//二级
childs: [
{
entity: {
id: 7,
name: "accountManage",
icon: "el-icon-phone-outline",
alias: "帐号管理",
value: ""
},
//三级
childs: [
{
entity: {
id: 14,
name: "emailManage",
icon: "el-icon-circle-plus-outline",
alias: "邮箱管理",
value: "/content/email"
}
},
{
entity: {
id: 13,
name: "passManage",
icon: "el-icon-circle-plus-outline",
alias: "密码管理",
value: "/content/pass"
}
}
]
},
{
entity: {
id: 8,
name: "integralManage",
icon: "el-icon-circle-plus-outline",
alias: "积分管理",
value: "/user/integral"
}
}
]
},
{
//一级
entity: {
id: 40,
name: "contentManage",
icon: "el-icon-circle-plus-outline",
alias: "四级菜单"
},
//er级
childs: [
{
entity: {
id: 41,
name: "classifyManage2",
icon: "el-icon-circle-plus-outline",
alias: "分类管理"
},
//三级
childs: [
{
entity: {
id: 42,
name: "classifyManage3",
icon: "el-icon-circle-plus-outline",
alias: "分类管理"
},
//四级
childs: [
{
entity: {
id: 43,
name: "classifyManage4",
icon: "el-icon-circle-plus-outline",
alias: "分类管理",
value: "/content/classify"
}
}
]
}
]
}
]
}
],
};
},
computed:{
// const route = this.$route
// const { meta, path } = route
// if set path, the sidebar will highlight the path you set
// if (meta.activeMenu) {
// return meta.activeMenu
// }
// return path
},
mounted(){
console.log(window.location.href)
let start = window.location.href.lastIndexOf('/');
let path = window.location.href.slice(start+1);
this.activeIndex = path;
},
methods:{
// changeFn(item){
// console.log(100889100,item)
// // console.log(100889100,value)
// },
// selectFn(item){
// console.log(100889,item)
// // console.log(100889,value)
// },
// closeFn(item){
// console.log(100889200,item)
// // console.log(100889200,value)
// }
}
};
</script>
<style scoped>
/* li > ul{
height: 100px;
width: 200px;
background: red;
border-left: 1px solid red;
} */
</style>
<style lang="sass" scoped>
</style>
<template>
<div class="navMenu">
<template v-for="navMenu in navMenus" >
<!-- 最后一级菜单 -->
<el-menu-item v-if="!navMenu.childs&&navMenu.entity" :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name">
<!-- <i :class="navMenu.entity.icon"></i> -->
<span slot="title" >{{navMenu.entity.alias}}</span>
</el-menu-item>
<!-- 此菜单下还有子菜单 -->
<el-submenu v-if="navMenu.childs&&navMenu.entity"
:key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name">
<template slot="title">
<!-- <i class="el-icon-remove-outline" v-if="activeIndex == navMenu.entity.name"></i> -->
<i :class="navMenu.entity.icon" style="color:#ff4dff"></i>
<span> {{navMenu.entity.alias}}</span>
<!-- <span> 555{{navMenu.entity}}</span> -->
<!-- <span> 88{{activeIndex}}</span> -->
</template>
<!-- 递归 -->
<NavMenu :navMenus="navMenu.childs" id="childsId"></NavMenu>
</el-submenu>
</template>
</div>
</template>
<script>
export default {
name: 'NavMenu',
props: ['navMenus','activeIndex'],
data() {
return {}
},
mounted(){
console.log(1089,this.activeIndex)
},
methods: {
}
}
</script>
<style scoped>
>>>.el-submenu .el-menu{
margin-left: 30px !important
}
li{
padding-left: 5px !important;
}
#childsId{
border-left: 3px solid #33ff77 !important;
}
</style>
\ No newline at end of file
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
router,
render: h => h(App)
}).$mount('#app')
\ No newline at end of file
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [{
path: '/',
redirect: '/aa',
}, {
path: '/aa',
name: 'aa',
component: () =>
import('./views/aa.vue')
},
{
path: '/authManage',
name: 'authManage',
component: () =>
import('./views/authManage.vue')
},
{
path: '/roleManage',
name: 'roleManage',
component: () =>
import('./views/roleManage.vue')
},
{
path: '/menuManage',
name: 'menuManage',
component: () =>
import('./views/menuManage.vue')
},
{
path: '/groupManage',
name: 'groupManage',
component: () =>
import('./views/groupManage.vue')
},
{
path: '/classifyManage4',
name: 'classifyManage4',
component: () =>
import('./views/classifyManage4.vue')
},
{
path: '/emailManage',
name: 'emailManage',
component: () =>
import('./views/emailManage.vue')
},
{
path: '/passManage',
name: 'passManage',
component: () =>
import('./views/passManage.vue')
},
{
path: '/integralManage',
name: 'integralManage',
component: () =>
import('./views/integralManage.vue')
},
{
path: '/integralManage',
name: 'integralManage',
component: () =>
import('./views/integralManage.vue')
},
],
})
<template>
</template>
<script>
</script>
<style>
</style>
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<div class="tree">
<ul>
<li>
<span><i class="icon-calendar"></i> 2013, Week 2</span>
<ul>
<li>
<span class="badge badge-success"><i class="icon-minus-sign"></i> Monday, January 7: 8.00 hours</span>
<ul>
<li>
<a href=""><span><i class="icon-time"></i> 8.00</span> &ndash; Changed CSS to accomodate...</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
<script>
import $ from 'jquery'
export default {
name: 'home',
data(){
return{
}
},
mounted(){
$(function(){
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
$('.tree li.parent_li > span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
} else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
});
}
}
</script>
<style scoped>
.tree {
min-height:20px;
padding:19px;
margin-bottom:20px;
background-color:#fbfbfb;
border:1px solid #999;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree li {
list-style-type:none;
margin:0;
padding:10px 5px 0 5px;
position:relative
}
.tree li::before, .tree li::after {
content:'';
left:-20px;
position:absolute;
right:auto
}
.tree li::before {
border-left:1px solid #999;
bottom:50px;
height:100%;
top:0;
width:1px
}
.tree li::after {
border-top:1px solid #999;
height:20px;
top:25px;
width:25px
}
.tree li span {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #999;
border-radius:5px;
display:inline-block;
padding:3px 8px;
text-decoration:none
}
.tree li.parent_li>span {
cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
border:0
}
.tree li:last-child::before {
height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
background:#eee;
border:1px solid #94a0b4;
color:#000
}
</style>
<template>
<div>
<div id="main" style="width: 50%;height:400px;"></div>
<el-radio-group v-model="radio4" size="medium" @change="changehandel">
<el-radio-button v-for='(item,index) in changeList' :key="index" :label="item" ></el-radio-button>
</el-radio-group>