用vue实现导航菜单的时候,因项目需求要实现下拉菜单带动画效果,而不是简单的显示隐藏,用jquery实现大家应该都会,但是用vue实现怎么办?这就用到了vue的函数式组件
1、
写好导航样式和导航数据列表,渲染出导航列表,引入collapse-transition.js
<style>
.menu_box{
width:200px;
margin:100px auto;
border:1px solid #f00;
}
.mo_menu{
width:100%;
line-height:35px;
font-size:16px;
border-bottom: 1px solid #F5F5F5;
transition:.3s;
}
.mo_menu .mo_text{
display: block;
padding:0px 10px;
box-sizing: border-box;
color:#676767;
transition:.3s;
}
.mo_menu .mo_text.no_page{
color:#003e97;
}
.mo_menu.open .mo_text .icon{
transform: rotate(0deg);
}
.mo_menu.open .mo_text{
color:#003e97;
}
.mo_menu .mo_text .icon{
float:right;
width:15px;
height:15px;
margin:10px 0px;
transform: rotate(-90deg);
transition:.3s;
font-weight: bold;
}
.mo_menu .mo_box{
width:100%;
overflow: hidden;
}
.mo_menu .mo_box .mo_list a{
line-height:35px;
padding:0px 10px;
box-sizing: border-box;
color:#989898;
display: block;
transition:.3s;
}
.mo_menu .mo_box .mo_list.active a{
background:#C9DEFF;
color:#4D76B2;
}
</style>
<template>
<div>
<ul class="menu_box">
<li
v-for="(item,index) in navMenu"
:key="index"
ref="moMenu"
:class="[
{'open': isOpen === index},
{'has-sub': item.child.length>0},
'mo_menu',
]"
>
<router-link
class="mo_text"
:to="item.path"
@click.native="menuOpen($event,index)"
:class="{
'no_page': $route.path === `${item.path}`
}"
>
<span>{{item.title}}</span>
<i class="icon el-icon-arrow-down el-icon--right" v-if="item.child.length>0"></i>
</router-link>
<collapse-transition>
<ul class="mo_box" v-show="item.child.length>0 && isOpen === index">
<li v-for="items in item.child"
:class="[
'mo_list',
{ 'active': $route.path === `${items.path}` }
]">
<router-link :to="items.path" v-if="items.path">{{items.title}}</router-link>
<a :href="items.href" :target="items.target" v-if="!items.path">{{items.title}}</a>
</li>
</ul>
</collapse-transition>
</li>
</ul>
</div>
</template>
<script>
import CollapseTransition from './collapse-transition';
export default {
name: 'NavMenu',
components:{
'collapse-transition': CollapseTransition,
},
data () {
return {
navMenu:[
{
id:"0",
state:0,
title:"首页",
path:"/",
child:[]
},
{
id:"1",
state:0,
title:"医疗诊断",
path:"/medical",
child:[
{
id:"1_1",
title:"SD1",
path:"/medical/sd1",
child:[]
},
{
id:"1_2",
title:"SMT-120",
path:"/medical/smt-120",
child:[]
},
{
id:"1_3",
title:"医用试剂盘",
path:"/medical/medical_disc",
child:[]
}
]
},
{
id:"2",
state:0,
title:"动物诊断",
path:"/animal",
child:[
{
id:"2_1",
title:"SMT-120V",
path:"/animal/smt-120v",
child:[]
},
{
id:"2_2",
title:"兽用试剂盘",
path:"/animal/animal_disc",
child:[]
},
{
id:"2_3",
title:"病例分享",
path:"/animal/case_sharing",
child:[]
}
],
},
{
id:"3",
state:0,
title:"新闻中心",
path:"/news",
child:[]
},
{
id:"4",
state:0,
title:"关于我们",
path:"/about",
child:[
{
id:"4_1",
title:"招商中心",
path:"/about/attrInves",
child:[]
},
{
id:"4_2",
title:"资料中心",
path:"/about/support",
child:[]
},
{
id:"4_3",
title:"常见问题",
path:"/about/problem",
child:[]
},
{
id:"4_4",
title:"联系我们",
path:"/about/contact",
child:[]
}
]
}
],
isOpen:-1
}
},
mounted:function(){
this.$nextTick(()=>{
this.selectMenu()
})
},
methods:{
selectMenu(){
this.navMenu.forEach((item, index) => {
this.$refs.moMenu[index].firstChild.style = "";
if (item.child.length > 0) {
item.child.forEach((child) => {
if (this.$route.path === `${child.path}`) {
this.isOpen = index;
}
});
} else {
if (this.$route.path === `${item.path}`) {
this.isOpen = -1;
}
}
});
},
menuOpen(e,index){
const target = e.currentTarget;
if (target.parentNode.className.includes('has-sub')) {
if (this.isOpen === index) {
this.isOpen = -1;
} else {
this.isOpen = index;
}
} else {
this.isOpen = -1;
}
this.navMenu.forEach((item, indexs) => {
if (index == indexs) {
this.$refs.moMenu[indexs].firstChild.style.color = "#003e97"
}else{
this.$refs.moMenu[indexs].firstChild.style.color = "#676767"
}
})
}
}
}
</script>
2、
新建collapse-transition.js文件,代码实现如下:
const elTransition = '0.3s height ease-in-out';
const Transition = {
beforeEnter(el) {
el.style.transition = elTransition;
if (!el.dataset) el.dataset = {};
el.style.height = 0;
},
enter(el) {
if (el.scrollHeight !== 0) {
el.style.height = `${el.scrollHeight}px`;
} else {
el.style.height = '';
}
el.style.overflow = 'hidden';
},
afterEnter(el) {
el.style.transition = '';
el.style.height = '';
},
beforeLeave(el) {
if (!el.dataset) el.dataset = {};
el.style.display = 'block';
el.style.height = `${el.scrollHeight}px`;
el.style.overflow = 'hidden';
},
leave(el) {
if (el.scrollHeight !== 0) {
el.style.transition = elTransition;
el.style.height = 0;
}
},
afterLeave(el) {
el.style.transition = '';
el.style.height = '';
},
};
export default {
name: 'CollapseTransition',
functional: true,
render(h, { children }) {
const data = {
on: Transition,
};
return h('transition', data, children);
},
};
这样就实现了带动画的下拉菜单,有不懂的朋友欢迎下方留言哦