Skip to content

E
element-nav

小四是个处女座 / element-nav

通知 2
Star 0
Fork 0
E
element-nav

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

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

添加内容

上级 bea2798b
展开全部 隐藏空白更改
内联 并排
Showing with 33685 addition and 2 deletion
.gitignore 0 → 100644
浏览文件 @ 04e95ff4
.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*
README.md
浏览文件 @ 04e95ff4
# 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).
babel.config.js 0 → 100644
浏览文件 @ 04e95ff4
module.exports = {
presets: [
'@vue/app'
]
}
package-lock.json 0 → 100644
浏览文件 @ 04e95ff4
此差异已折叠。
package.json 0 → 100644
浏览文件 @ 04e95ff4
{
"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"
]
}
public/index.html 0 → 100644
浏览文件 @ 04e95ff4
<!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>
src/App.vue 0 → 100644
浏览文件 @ 04e95ff4
<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>
src/components/NavMenu.vue 0 → 100644
浏览文件 @ 04e95ff4
<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
src/main.js 0 → 100644
浏览文件 @ 04e95ff4
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
src/router.js 0 → 100644
浏览文件 @ 04e95ff4
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')
},
],
})
src/views/111.vue 0 → 100644
浏览文件 @ 04e95ff4
<template>
</template>
<script>
</script>
<style>
</style>
src/views/aa.vue 0 → 100644
浏览文件 @ 04e95ff4
<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>
src/views/authManage.vue 0 → 100644
浏览文件 @ 04e95ff4
<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>
</div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
all: {
"log-1": [120, 132, 101, 134, 90, 230, 210],
"log-2": [320, 332, 301, 334, 390, 330, 320],
"log-3": [456, 346, 167, 346, 124, 953, 341],
"data-1": [534, 2567, 45, 134, 90, 230, 210],
"data-2": [320, 332, 301, 334, 390, 330, 320],
"data-3": [820, 932, 901, 934, 1290, 1330, 1320]
},
changeList: ["log", "data", "all"],
radio4:'log',
};
},
methods: {
line(result) {
let myChart = echarts.init(document.getElementById("main"));
let legend = [];
for (let key in result) {
legend.push(key);
}
// 指定图表的配置项和数据
let option = {
title: {
text: "折线图堆叠"
},
tooltip: {
trigger: "axis"
},
legend: {
data: legend
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
},
yAxis: {
type: "value"
},
series: []
};
for (let key in result) {
option.series.push({
name: key,
type: "line",
stack: "总量",
data: result[key]
});
}
myChart.clear();//清空ECharts
myChart.setOption(option);
},
changehandel(val) {
let reg = new RegExp(val);
let data = {};
if (val !== "all") {
for (let key in this.all) {
if (reg.test(key)) {
data[key] = this.all[key];
}
}
} else {
for (let key in this.all) {
data[key] = this.all[key];
}
}
this.line(data);
}
},
mounted() {
// console.log('auth mounted');
this.changehandel(this.radio4)
}
};
</script>
<style>
</style>
src/views/classifyManage4.vue 0 → 100644
浏览文件 @ 04e95ff4
<template>
<div>
classifyManage4
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
src/views/emailManage.vue 0 → 100644
浏览文件 @ 04e95ff4
<template>
<div>
<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>
</template>
<script>
export default {
mounted(){
}
}
</script>
<style>
</style>
src/views/groupManage.vue 0 → 100644
浏览文件 @ 04e95ff4
<template>
<div>
groupManage
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
src/views/integralManage.vue 0 → 100644
浏览文件 @ 04e95ff4
<template>
<div>
integralManage
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
src/views/menuManage.vue 0 → 100644
浏览文件 @ 04e95ff4
<template>
<div>
<input type="file" name="upload" id="upload" accept="text/plain"/>
<textarea name="content" id="content"></textarea>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
src/views/passManage.vue 0 → 100644
浏览文件 @ 04e95ff4
<template>
<div>
passManage
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
src/views/roleManage.vue 0 → 100644
浏览文件 @ 04e95ff4
<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>
</div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
all: {
"log-1": [120, 132, 101, 134, 90, 230, 210],
"log-2": [320, 332, 301, 334, 390, 330, 320],
"log-3": [456, 346, 167, 346, 124, 953, 341],
"data-1": [534, 2567, 45, 134, 90, 230, 210],
"data-2": [320, 332, 301, 334, 390, 330, 320],
"data-3": [820, 932, 901, 934, 1290, 1330, 1320]
},
changeList: ["log", "data", "all"],
radio4: "all"
};
},
methods: {
line(result) {
let myChart = echarts.init(document.getElementById("main"));
let legend = [];
for (let key in result) {
legend.push(key);
}
// 指定图表的配置项和数据
let option = {
title: {
text: "折线图堆叠"
},
tooltip: {
trigger: "axis"
},
legend: {
data: legend
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
},
yAxis: {
type: "value"
},
series: []
};
for (let key in result) {
option.series.push({
name: key,
type: "line",
stack: "总量",
data: result[key]
});
}
//折线图点击事件-start
function triggerAction(action, selected) {
legend = [];
for (let name in selected) {
if (selected.hasOwnProperty(name)) {
legend.push({ name: name });
}
}
myChart.dispatchAction({
type: action,
batch: legend
});
}
function click({name: legend, selected}) {
let isBegin = true;
//判断是否是第一次点击
//name = legend时, 当是true时,不是第一次
//name!=legend, 有false,不是第一次
for (let name in selected) {
if (selected.hasOwnProperty(name)) {
if (name === legend) {
if (selected[name] === true) {
isBegin = false;
}
} else {
if (selected[name] === false) {
isBegin = false;
}
}
}
}
//是第一次的时候, name = legend时,选中;其他不选中
//不是第一次,当selectd[legend] = true;说明他之前是false,不选中状态. 点击它是要选中它,所以name = legend时,选中;其他不选中;
//............................= false;说明他之前是true,选中状态. 点击它是要选中全部,所以全部选中.
if (isBegin) {
for (let name in selected) {
if (selected.hasOwnProperty(name)) {
if (name === legend) {
myChart.dispatchAction({type: 'legendSelect', name});
} else {
myChart.dispatchAction({type: 'legendUnSelect', name});
}
}
}
} else {
if (isBegin || (!isBegin && selected[legend])) {
for (let name in selected) {
if (selected.hasOwnProperty(name)) {
if (name === legend) {
myChart.dispatchAction({type: 'legendSelect', legend});
} else {
myChart.dispatchAction({type: 'legendUnSelect', name});
}
}
}
} else {
for (let name in selected) {
if (selected.hasOwnProperty(name)) {
myChart.dispatchAction({type: 'legendSelect', name});
}
}
}
}
}
// myChart.off("legendselectchanged");
myChart.on("legendselectchanged", click);
myChart.clear(); //清空ECharts
myChart.setOption(option);
},
changehandel(val) {
let reg = new RegExp(val);
let data = {};
if (val !== "all") {
for (let key in this.all) {
if (reg.test(key)) {
data[key] = this.all[key];
}
}
} else {
for (let key in this.all) {
data[key] = this.all[key];
}
}
this.line(data);
}
},
mounted() {
this.changehandel(this.radio4);
}
};
</script>
<style>
</style>
yarn.lock 0 → 100644
浏览文件 @ 04e95ff4
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或