任务：同济大学运行图界面
进路：完成menu的创建
This commit is contained in:
ival
parent
a75c603f21
commit
aaae6db62e
@ -1,6 +1,11 @@
|
||||
<template>
|
||||
<div class="menu-item">
|
||||
<span class="menu-label">{{menu.title}}</span>
|
||||
<div class="menu"
|
||||
@click.stop="onClick"
|
||||
@mouseenter.stop="onMouseEnter"
|
||||
@mouseleave.stop="onMouseLeave">
|
||||
<slot name="prefix"/>
|
||||
<span class="menu-label" :class="{'menu-check': check}" :style="{color: color}">{{menu.title}}</span>
|
||||
<slot name="append"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -12,9 +17,52 @@ export default {
|
||||
menu: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
check: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('click');
|
||||
},
|
||||
onMouseEnter() {
|
||||
this.$emit('mouseenter');
|
||||
},
|
||||
onMouseLeave() {
|
||||
this.$emit('mouseleave');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.menu {
|
||||
list-style: none;
|
||||
padding: 0 17px;
|
||||
margin: 0;
|
||||
border: 1px solid transparent;
|
||||
|
||||
cursor: pointer;
|
||||
&-label {
|
||||
border: 1px dashed transparent;
|
||||
}
|
||||
|
||||
&-check {
|
||||
border: 1px dashed #8f8f8f;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #C4E1FF;
|
||||
border: 1px solid #49A4FE;
|
||||
}
|
||||
&:active {
|
||||
background: #C4E1FF;
|
||||
border: 1px solid #49A4FE;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,19 @@
|
||||
<template>
|
||||
<div class="menu">
|
||||
<ul class="menu-ul">
|
||||
<li class="menu-li" v-for="(el,i) in menus" :key="i">
|
||||
<menu-list v-if="el.children&&el.children.length" :menus="el.children"/>
|
||||
<menu-item v-else :menu="el" />
|
||||
<ul class="menu-ul" :style="{background: background}">
|
||||
<li class="menu-li" :class="elMenuClass" v-for="(el,i) in menus" :key="i">
|
||||
<div v-if="el.isSeparation" class="menu-separation" />
|
||||
<menu-item v-else :menu="el" :color="color"
|
||||
:check="false"
|
||||
@click="onClick(el, i)"
|
||||
@mouseenter="onMouseEnter(el, i)"
|
||||
@mouseleave="onMouseLeave(el, i)">
|
||||
<template v-if="el.children&&el.children.length" slot="append">
|
||||
<span class="menu-arrow" />
|
||||
<menu-list class="menu-list" v-if="index==i" :background="background" :color="color" :menus="el.children"/>
|
||||
</template>
|
||||
</menu-item>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -21,7 +28,85 @@ export default {
|
||||
menus: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
elMenuClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: -1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onMouseEnter(el, i) {
|
||||
this.index = i;
|
||||
},
|
||||
onMouseLeave(el, i) {
|
||||
this.index = -1;
|
||||
},
|
||||
onClick(el, i) {
|
||||
if (el.disabled) return;
|
||||
|
||||
if (el.handle) {
|
||||
el.handle(el);
|
||||
this.$emit('close', el, i)
|
||||
this.index = -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
ul,li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu {
|
||||
&-ul {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #d1d1d1;
|
||||
box-shadow: 2px 2px 2px #999;
|
||||
z-index: 999;
|
||||
}
|
||||
&-li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
height: 0;
|
||||
width: 0;
|
||||
margin-left: 10px;
|
||||
border-top: 5px solid transparent;
|
||||
border-left: 5px solid #000;
|
||||
border-bottom: 5px solid transparent;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&-list {
|
||||
transform:translateX(100%);
|
||||
right: 0px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&-separation {
|
||||
height: 0px;
|
||||
border: 1px solid #bfbfbf;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,16 @@
|
||||
<template>
|
||||
<div class="nav">
|
||||
<div v-for="(el,i) in menus" :key="i">
|
||||
<menu-item :menu="el" @click="doClick(el, i)" />
|
||||
<template v-if="el.children&&el.children.length">
|
||||
<menu-list v-if="active==i" :menus="el.children" />
|
||||
<div class="nav" :class="elNavClass" :style="{background: background}">
|
||||
<div class="nav-menu" v-for="(el,i) in menus" :key="i">
|
||||
<menu-item :menu="el"
|
||||
:check="active==i"
|
||||
@click="onClick(el, i)"
|
||||
@close="onMouseEnter(el, i)"
|
||||
@mouseenter="onMouseEnter(el, i)"
|
||||
@mouseleave="onMouseLeave(el, i)" :color="color" >
|
||||
<template v-if="el.children&&el.children.length" slot="append">
|
||||
<menu-list style="transform: translateY(-3px);" v-if="index==i" :menus="el.children" :background="background" :color="color" :elMenuClass="elMenuClass"/>
|
||||
</template>
|
||||
</menu-item>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -23,21 +29,55 @@ export default {
|
||||
menus: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#F6F6F6'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#222'
|
||||
},
|
||||
elNavClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
elMenuClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: -1,
|
||||
active: -1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doClick(el, i){
|
||||
if (el.disabled) return;
|
||||
onClick(el, i){
|
||||
this.active = i;
|
||||
if (el.disabled) return;
|
||||
if (el.handle) {
|
||||
el.handle(el, i);
|
||||
el.handle(el);
|
||||
this.onMouseLeave();
|
||||
}
|
||||
},
|
||||
onMouseEnter(el, i) {
|
||||
this.index = i;
|
||||
},
|
||||
onMouseLeave(el, i) {
|
||||
this.index = -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
&-menu {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,40 +18,138 @@ export default {
|
||||
title: '文件(F)',
|
||||
children: [
|
||||
{
|
||||
title: '创建',
|
||||
click: this.newRunPlan
|
||||
title: '打开数据库',
|
||||
handle: this.newRunPlan
|
||||
},
|
||||
{
|
||||
title: '退出',
|
||||
handle: this.newRunPlan
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '车站(A)',
|
||||
children: [
|
||||
{
|
||||
title: '车站平面图(F)',
|
||||
handle: this.newRunPlan
|
||||
},
|
||||
{
|
||||
title: '追踪间隔时分(I)',
|
||||
handle: this.newRunPlan,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '区间(S)',
|
||||
children: [
|
||||
{
|
||||
title: '区间信息(I)',
|
||||
handle: this.newRunPlan
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '车底(C)',
|
||||
children: [
|
||||
|
||||
{
|
||||
title: '车底信息(I)',
|
||||
handle: this.newRunPlan
|
||||
},
|
||||
{
|
||||
title: '车底折返时间(R)',
|
||||
handle: this.newRunPlan
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '列车(N)',
|
||||
children: [
|
||||
{
|
||||
title: '区间运行标尺(E)',
|
||||
handle: this.newRunPlan
|
||||
},
|
||||
{
|
||||
title: '列车停站标尺(S)',
|
||||
handle: this.newRunPlan
|
||||
},
|
||||
{
|
||||
title: '列车交路管理(S)',
|
||||
handle: this.newRunPlan,
|
||||
children: [
|
||||
{
|
||||
title: 'test1',
|
||||
handle: this.newRunPlan,
|
||||
children: [
|
||||
{
|
||||
title: 'test1',
|
||||
handle: this.newRunPlan
|
||||
},
|
||||
{
|
||||
isSeparation: true
|
||||
},
|
||||
{
|
||||
title: 'test2',
|
||||
handle: this.newRunPlan,
|
||||
children: [
|
||||
{
|
||||
title: 'test1',
|
||||
handle: this.newRunPlan
|
||||
},
|
||||
{
|
||||
title: 'test2',
|
||||
handle: this.newRunPlan
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'test2',
|
||||
handle: this.newRunPlan
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '底图结构(D)',
|
||||
children: [
|
||||
{
|
||||
title: '生成地图结构(C)',
|
||||
handle: this.newRunPlan
|
||||
},
|
||||
{
|
||||
title: '地图结构管理(M)',
|
||||
handle: this.newRunPlan
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '运行图(T)',
|
||||
children: [
|
||||
{
|
||||
title: '运行图编制(G)',
|
||||
handle: this.newRunPlan
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '系统(S)',
|
||||
children: [
|
||||
{
|
||||
title: '系统参数(P)',
|
||||
handle: this.newRunPlan
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '帮助(H)',
|
||||
children: [
|
||||
{
|
||||
title: '有关(A)',
|
||||
handle: this.newRunPlan
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -60,6 +158,9 @@ export default {
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
newRunPlan() {
|
||||
console.log(11111111)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user