任务：同济大学运行图界面

进路：完成menu的创建

src/views/planMonitor/editToolTJ/component/menuItem.vue

@@ -1,6 +1,11 @@
 <template>
-	<div class="menu-item">
+	<div class="menu"
-		<span class="menu-label">{{menu.title}}</span>
+		@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>

src/views/planMonitor/editToolTJ/component/menuList.vue

@@ -1,12 +1,19 @@
 <template>
-	<div class="menu">
+	<ul class="menu-ul" :style="{background: background}">
-		<ul class="menu-ul">
+		<li class="menu-li" :class="elMenuClass" v-for="(el,i) in menus" :key="i">
-			<li class="menu-li" v-for="(el,i) in menus" :key="i">
+			<div v-if="el.isSeparation" class="menu-separation" />
-				<menu-list v-if="el.children&&el.children.length" :menus="el.children"/>
+			<menu-item v-else :menu="el" :color="color"
-				<menu-item v-else :menu="el" />
+				:check="false"
-			</li>
+				@click="onClick(el, i)"
-		</ul>
+				@mouseenter="onMouseEnter(el, i)"
-	</div>
+				@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>
 </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>

src/views/planMonitor/editToolTJ/component/menuNav.vue

@@ -1,10 +1,16 @@
 <template>
-	<div class="nav">
+	<div class="nav" :class="elNavClass" :style="{background: background}">
-		<div v-for="(el,i) in menus" :key="i">
+		<div class="nav-menu" v-for="(el,i) in menus" :key="i">
-			<menu-item :menu="el"  @click="doClick(el, i)" />
+			<menu-item :menu="el"
-			<template v-if="el.children&&el.children.length">
+				:check="active==i"
-				<menu-list v-if="active==i" :menus="el.children" />
+				@click="onClick(el, i)"
-			</template>
+				@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){
+		onClick(el, i){
-			if (el.disabled)  return;
 			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>

src/views/planMonitor/editToolTJ/navBar.vue

@@ -18,40 +18,138 @@ export default {
                     title: '文件(F)',
                     children: [
                         {
-                            title: '创建',
+                            title: '打开数据库',
-                            click: this.newRunPlan
+                            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>