场景类：vue+iview实现三级导航

效果

说明

虽然 iview 中有三级导航的例子，但是不是用 v-for 循环的，比较麻烦，我们这里改造一下，写成配置。先看看官方的，和我们的效果没差，只不过代码比较冗余，如果有多个导航写成配置文件比较好一点。接下来我们就来优化一下

<Submenu name="2"><template slot="title"><Icon type="ios-filing" />Navigation Two</template><MenuItem name="2-1">Option 5</MenuItem><MenuItem name="2-2">Option 6</MenuItem><Submenu name="3"><template slot="title">Submenu</template><MenuItem name="3-1">Option 7</MenuItem><MenuItem name="3-2">Option 8</MenuItem></Submenu>
</Submenu>

代码

<Menu :active-name="'/' + ($route.path).split('/')[1]"theme="light"width="auto"@on-select="viewPage"><!-- 菜单开始，Menu-item是内容，template slot="title"是大标题 --><template v-for="nav in navs"><Submenu :name="nav.tab":key="nav.key"v-if="nav.title"><!-- 一级菜单，slot="title"代表这里是标题 --><template slot="title"><!-- 一级菜单标题 --><Icon :type="nav.icon":size="iconSize"></Icon><span class="layout-text">{{ nav.title }}</span></template><!-- 二级菜单 --><template v-for="child in nav.subs"><Menu-item :name="child.tab":key="child.key"v-if="child.tab"><!-- 有三级导航的，配置的时候不要加tab，这里用v-if="child.tab"判断了一下，否则会出现二级菜单有两个三级菜单 --><Icon :type="child.icon":size="iconSize"></Icon><span class="layout-text">{{child.label}}</span></Menu-item><!-- 以下是三级菜单 --><Submenu :name="child.tab":key="child.key"v-if="child.children && child.children.length > 0"><!-- 三级菜单标题 --><template slot="title"><Icon :type="child.icon":size="iconSize"></Icon><span class="layout-text">{{child.label}}</span></template><!-- 三级菜单内容 --><template v-for="son in child.children"><Menu-item :name="son.tab":key="son.key"><Icon :type="son.icon":size="iconSize"></Icon><span class="layout-text">{{son.label}}</span></Menu-item></template></Submenu></template></Submenu><!-- 如果是无下拉导航走这里，通过有没有title来判断 --><Menu-item :name="nav.tab":key="nav.key"v-if="!nav.title"><Icon :type="nav.icon":size="iconSize"></Icon><span class="layout-text">{{nav.label}}</span></Menu-item></template>
</Menu>import nav from './config/nav.js'
data () {return {navs: nav}
},
viewPage (name) {this.$router.push({ path: name })
}

// nav.js 导航配置，tab为路由路径
let nav = [{label: '无下拉导航',icon: 'ios-folder',tab: '/project-push'},{title: '一级导航',icon: 'ios-folder',tab: '/project-push',subs: [{label: '二级导航1',tab: '/project-push',icon: 'ios-grid'},{label: '二级导航2',tab: '/project-info',icon: 'ios-pie'},// 有三级菜单则大标题不要tab{label: '二级导航3',icon: 'ios-grid',children: [{label: '三级导航1',tab: '/record',icon: 'ios-grid'},{label: '三级导航2',tab: '/ssocode',icon: 'ios-grid'}]}]}
]

场景类：vue+iview实现三级导航相关推荐

vue 移动端顶部导航组件
废话不多说,下面是我自己写的vue移动端顶部导航组件给大家分享一下 ,动态绑定背景颜色,字体颜色,以及回退图标.需要的直接拿去放项目里用吧- 示例图: HTML <template>< ...
【玩转cocos2d-x之七】场景类CCScene和布景类CCLayer
原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/12708811 场景类CCScene和布景类CCLayer都是作为一个容器来使 ...
Vue+iview实现自定义格式导出Excel文件
背景:项目中要实现一个导出Excel文件模板的功能,原来实现是通过后台生成然后前端请求下载,这样要消耗IO资源,然后看了一下之前项目的导出功能,发现原来Vue+iview可以实现本地数据导出,不过iv ...
java 三级菜单栏的添加_[Java教程]jquery实现的三级导航菜单实例代码
[Java教程]jquery实现的三级导航菜单实例代码 0 2016-01-02 15:00:02 jquery实现的三级导航菜单实例代码: 使用最多的可能是二级导航菜单,所以网上的代码一大堆,三级菜 ...
认识Vue源码（2）-- 手写类Vue框架：Zue
一.手写类Vue框架:zue class Zue{constructor(options){//构造函数:this永远指向实例} } 1.在zue实例下创建$el,并指向挂载点 this.$el = ...
iview构建基本html页面,写前端页面步骤----vue+iview
1:用iview构建基本HTML页面 2:在export default{ }中写一个data(){return:{变量:值}}全局对象,用于传递与绑定HTML参数. 3:在export defaul ...
【Cocos2dx】利用导演类、场景类完成重新开始游戏、暂停游戏、关闭游戏功能
重新开始游戏.暂停游戏.关闭游戏是绝对是游戏的基础,虽然代码不多,不过这要利用到Cocos2dx导演类.场景类完成,事先如果不对其进行了解,绝对是很难做出来. 下面用一个小例子说明如何利用导演类.场景 ...
vue + iview Table表头中插入图片
vue + iview Table表头中插入图片开发中遇到一个问题,在表头中需要插入一个公式,不想再引入别的插件所以考虑用图片代替正常代码中这样引入图片前端可以正常显示: <img styl ...
vue项目-element UI-NavMenu 导航菜单始终只展开一个
vue项目-element UI-NavMenu 导航菜单始终只展开一个全局搜索:unique-opened找到该配置将其改成true unique-opened:是否只保持一个子菜单的展开 < ...
vue+iView实现导入与导出excel功能
vue+iView实现导入与导出excel功能一,需求: 1,导入导出的必要性导入与导出在日常项目开发中经常用到, 批量导入功能可以快速插入添加数据. 导出功能则可方便直观明了拿到所需展示的重要数 ...

场景类：vue+iview实现三级导航

效果

说明

代码

场景类：vue+iview实现三级导航相关推荐

最新文章

热门文章