修改同济大学运行图bar
This commit is contained in:
parent
d84f4ba836
commit
4e4d602400
@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="menu"
|
<div class="menu"
|
||||||
@click.stop="onClick"
|
@click.self="onClick"
|
||||||
@mouseenter.stop="onMouseEnter"
|
@mouseenter.self="onMouseEnter"
|
||||||
@mouseleave.stop="onMouseLeave">
|
@mouseleave.self="onMouseLeave">
|
||||||
<slot name="prefix"/>
|
<slot name="prefix"/>
|
||||||
<span class="menu-label" :class="{'menu-check': check}" :style="{color: color}">{{menu.title}}</span>
|
<span class="menu-label" :class="{'menu-check': check}" :style="{color: color}">{{menu.title}}</span>
|
||||||
<slot name="append"/>
|
<slot name="append"/>
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
@mouseleave="onMouseLeave(el, i)">
|
@mouseleave="onMouseLeave(el, i)">
|
||||||
<template v-if="el.children&&el.children.length" slot="append">
|
<template v-if="el.children&&el.children.length" slot="append">
|
||||||
<span class="menu-arrow" />
|
<span class="menu-arrow" />
|
||||||
<menu-list class="menu-list" v-if="index==i" :background="background" :color="color" :menus="el.children"/>
|
<menu-list class="menu-list" v-show="index==i" :background="background" :color="color" :menus="el.children"/>
|
||||||
</template>
|
</template>
|
||||||
</menu-item>
|
</menu-item>
|
||||||
</li>
|
</li>
|
||||||
@ -49,18 +49,20 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onMouseEnter(el, i) {
|
onMouseEnter(el, i) {
|
||||||
|
this.$emit('mouseenter', el, i);
|
||||||
this.index = i;
|
this.index = i;
|
||||||
},
|
},
|
||||||
onMouseLeave(el, i) {
|
onMouseLeave(el, i) {
|
||||||
|
this.$emit('mouseleave', el, i);
|
||||||
this.index = -1;
|
this.index = -1;
|
||||||
|
console.log(999999999999999)
|
||||||
},
|
},
|
||||||
onClick(el, i) {
|
onClick(el, i) {
|
||||||
|
this.$emit('click', el, i);
|
||||||
if (el.disabled) return;
|
if (el.disabled) return;
|
||||||
|
|
||||||
if (el.handle) {
|
if (el.handle) {
|
||||||
el.handle(el);
|
el.handle(el);
|
||||||
this.$emit('close', el, i)
|
this.onMouseLeave(el, i);
|
||||||
this.index = -1;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -4,11 +4,10 @@
|
|||||||
<menu-item :menu="el"
|
<menu-item :menu="el"
|
||||||
:check="active==i"
|
:check="active==i"
|
||||||
@click="onClick(el, i)"
|
@click="onClick(el, i)"
|
||||||
@close="onMouseEnter(el, i)"
|
|
||||||
@mouseenter="onMouseEnter(el, i)"
|
@mouseenter="onMouseEnter(el, i)"
|
||||||
@mouseleave="onMouseLeave(el, i)" :color="color" >
|
@mouseleave="onMouseLeave(el, i)" :color="color" >
|
||||||
<template v-if="el.children&&el.children.length" slot="append">
|
<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"/>
|
<menu-list style="transform: translateY(-3px);" v-show="index==i" :menus="el.children" :background="background" :color="color" :elMenuClass="elMenuClass"/>
|
||||||
</template>
|
</template>
|
||||||
</menu-item>
|
</menu-item>
|
||||||
</div>
|
</div>
|
||||||
@ -59,13 +58,15 @@ export default {
|
|||||||
if (el.disabled) return;
|
if (el.disabled) return;
|
||||||
if (el.handle) {
|
if (el.handle) {
|
||||||
el.handle(el);
|
el.handle(el);
|
||||||
this.onMouseLeave();
|
this.onMouseLeave(el, i);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onMouseEnter(el, i) {
|
onMouseEnter(el, i) {
|
||||||
this.index = i;
|
this.index = i;
|
||||||
|
console.log(333333333333333);
|
||||||
},
|
},
|
||||||
onMouseLeave(el, i) {
|
onMouseLeave(el, i) {
|
||||||
|
console.log(444444444444444);
|
||||||
this.index = -1;
|
this.index = -1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user