Demo 在线地址：
https://sx00xs.github.io/test/28/index.html
---------------------------------------------------------------
ide: vscode
文件格式：.vue
解析：（待补）
<template>
<div class="nav">
<ul>
<li v-for="(list,index) in lists" :key="list.name"
@mouseover="handleOver(list)"
@mouseout="handleOut(list)"
>
<a href="#">{{ list.name }}</a>
<transition name="fade"
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
>
<div class="subnav" v-if="list.isActive" :data-index="index">
<em class="arrow"></em>
<p>
<span>
<a href="#" v-for="item in list.subname" :key="item.mes">
{{item.mes }} {{item.bar}}
</a>
</span>
</p>
</div>
</transition>
</li>
</ul>
</div>
</template>
<script>
import {lists} from './lists';
import { setTimeout } from 'timers';
export default {
name:'Test',
data(){
return{
lists:lists
}
},
methods:{
handleOver(list){
list.isActive=true
},
handleOut(list){
list.isActive=false
},
beforeEnter(el){
el.style.display='none'
},
enter(el,done){
el.style.display='block';
var nav=el.offsetParent;
var myUl=el.offsetParent.firstChild;
var myLi=myUl.childNodes;
var index=el.dataset.index;
var em=el.firstChild;
nav.offsetWidth - myLi[index].offsetLeft > el.offsetWidth ?
el.style.left = myLi[index].offsetLeft + 'px' :
el.style.right =0;
em.style.left=myLi[index].offsetLeft - el.offsetLeft + 50 + 'px';
done()
},
leave(el,done){
setTimeout(function(){
el.style.display='none'
},300)
done()
}
}
}
</script>