先看看效果图
在做项目的时候,一般都需要这样的导航,可以无限的添加导航
仔细看看这个导航,只有一级导航是浮动的,然后二级,三级,四级...都是在下面横着排列过去的;
我做这个的时候是先在纸上画了个图(毕竟本人比较菜),然后先把布局做出来;
先来说说怎么做布局的吧;看看我的静态页面的结构
<ul class="list"> <li> <a href="#">首页</a> </li> <li> <a href="#">新闻</a> </li> <li> <a href="#">动态</a> </li> <li> <a href="#">一级菜单</a> <ul class="subItem"> <li> <a href="#">二级菜单-1</a> <ul class="subItem"> <li> <a href="#">三级菜单-1</a> <ul class="subItem"> <li> <a href="#">四级菜单</a> <ul class="subItem"> <li> <a href="#">五级菜单</a> </li> <li> <a href="#">五级菜单</a> </li> <li> <a href="#">五级菜单</a> </li> <li> <a href="#">五级菜单</a> </li> </ul> </li> <li> <a href="#">四级菜单</a> </li> <li> <a href="#">四级菜单</a> </li> <li> <a href="#">四级菜单</a> </li> <li> <a href="#">四级菜单</a> </li> <li> <a href="#">四级菜单</a> </li> <li> <a href="#">四级菜单</a> </li> </ul> </li> <li> <a href="#">三级菜单-2</a> <ul class="subItem"> <li> <a href="#">四级菜单----</a> </li> <li> <a href="#">四级菜单----</a> </li> <li> <a href="#">四级菜单----</a> </li> <li> <a href="#">四级菜单----</a> </li> </ul> </li> <li> <a href="#">三级菜单-3</a> </li> <li> <a href="#">三级菜单-4</a> </li> </ul> </li> <li> <a href="#">二级菜单-2</a> </li> <li> <a href="#">二级菜单-3</a> </li> <li> <a href="#">二级菜单-4</a> </li> </ul> </li> </ul>
之所以写的这么长,就是想看看最终的效果,其实它的基本结构就是
<ul> <li> <a href="">×××××</a> </li> </ul>
然后要嵌套下一级的时候,就在a标签下就再复制一个这样的基本结构;
然后我来看看样式应该怎么去写
ul,li{ padding: 0; margin: 0; list-style: none; } .list{ width: 1200px; height: 45px; margin: 0 auto; background-color: #000; } .list a{ color: #fff; text-decoration: none; } .list>li{//一级目录的样式,需要浮动排列在一起 float: left; } .list li{ position: relative; line-height: 45px; text-align: center; width: 200px; height: 45px; } .list li.active{//鼠标移入的时候的样式 background-color: red; } //二级标签的定位必须是这样的,不能改 .list>li>.subItem{ left: 0; top: 45px !important; } .list li .subItem{ position: absolute; background-color: #333; } .list li .subItem .subItem{//这个是三级目录,和三级以后的目录的定位,这个top值是要需要动态修改的(其实不改也是可以的,就看你自己想要什么效果了) top: 0; left: 200px; }
以上把布局写出来了,然后就考虑如何做成组件,这个明显是需要用到递归的,做着组件的时候,其实我由两部分组件组成的
先看看核心组件:
<template> <li @mouseenter="showFn" @mouseleave="hideFn" :class="{active:isShow}"> <a href="#">{{datas.text}}</a> <ul class="subItem" v-if="isChildern" :style="{top: -index*45+'px'}" v-show="isShow"> <base-nav :datas="item" :index="index" v-for="item,index in datas.children" :key="index"></base-nav> </ul> </li> </template> <script> export default { name: "base-nav", props: ["datas","index"], data () { return { isShow: false } }, computed: { //是否存在子级 isChildern () { return this.datas.children && this.datas.children.length } }, created () { }, methods: { showFn () { this.isShow = true }, hideFn () { this.isShow = false } } } </script>
首先注意:这里的name必须存在(看别人是这么说的),因为需要拿来引用自己,
:style="{top: -index*45+'px'}"这个其实无所谓的,看自己想要的效果,我是希望2,3,4...级都是对齐的,所以就这么写
然后是外层组件:
<template> <div class="header-bar"> <ul class="list"> <base-nav :datas="item" :index="index" v-for="item,index in lists" :key="index"></base-nav> </ul> </div> </template> <script> import baseNav from './base-nav' export default { props: ["lists"], components: { baseNav } } </script> <style> @import "../assets/css/header-bar.css"; </style>
最后我们其实是引入的这个组件
例如:
import headerBar from '@/components/header-bar'
<header-bar :lists="lists"></header-bar>
var lists = [ { text: '一级-1', children: [ { text: '二级1-1', children: [ { text: '三级1-1-1', children: [ { text: '四级1-1-1' } ] }, { text: '三级1-1-2', children: [] }, { text: '三级1-1-3', children: [] } ] }, { text: '二级1-2', children: [ { text: '三级1-2-1', children: [] }, { text: '三级1-2-2', children: [] }, { text: '三级1-2-3', children: [] } ] }, { text: '二级1-3', children: [] }, { text: '二级1-4', children: [] } ] }, { text: '一级-2', children: [ { text: '二级-2-1', children: [ { text: '三级-2-1-1', children: [] } ] }, { text: '二级-2-2', children: [] }, { text: '二级-2-3', children: [] }, { text: '二级-2-3', children: [] }, ] }, { text: '一级-3', children: [] } ]