前端框架iviewui使用示例之菜单+多Tab页布局

wallimn

浏览: 5161222 次
性别:
来自: 北京

最近访客更多访客>>

java-007

xckouy

lengyun3566

zxjun8771

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JAVA、WEB开发

iview

前言：
　　综合使用menu、tab实现菜单+Tab页的布局模式。学习调试作品，代码不是很严谨，但基本功能都实现了。

效果：

代码：

<!DOCTYPE html>

<!-- 
 作者：wallimn
 博客：http://wallimn.iteye.com
 时间：2017-11-22
 -->
<html>
<head>
    <meta charset="utf-8">
    <title>iview示例</title>
    <link rel="stylesheet" type="text/css" href="iview/styles/iview.css">
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="iview/iview.js"></script>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
	<style type="text/css">
		body,html{
	        background: #f5f7f9;
		}
		.layout{
	        
	    }
	    .layout-logo{
	        width: 100px;
	        height: 40px;
	        background: #5b6270;
	        border-radius: 3px;
	        float: left;
	        position: relative;
	        top: 15px;
	        left: 20px;
	    }
	    .layout-content{
	    	position:absolute;
	    	right:0;
	    	left:0;
	    	top:90px;
	    	bottom:90px;
	        margin: 15px;
	        overflow: hidden;
	        background: #fff;
	        border-radius: 4px;
	    }
	    .layout-content-main{
	        min-height: 400px;
	        padding: 10px;
	    }
	    .layout-copy{
	        text-align: center;
	        padding: 5px 0 10px;
	        color: #9ea7b4;
	        position:absolute;
	        bottom:0;
	        right:0;
	        left:0;
	    	width:100%;
	        height:90px;
	    }
	    .layout-top{
	    	position:absolute;
	    	top:0;
	    	right:0;
	    	left:0;
	    	width:100%;
	    	height:90px;
	    }
    </style>
</head>
<body>
	<div id="app">
		<div class="layout">
			<div class="layout-top">
	            <div class="layout-logo"></div>
			</div>
	        <div class="layout-content">
	            <Row >
	                <i-col span="5">
	                    <i-menu active-name="1-1" width="auto" accordion :open-names="[menuData[0].name]" @on-select="menuSelect" :style="{height:mainHeight+'px'}">
	                        <Submenu v-for="item in menuData" :name="item.name">
	                        	<template slot="title">
	                                <Icon type="ios-analytics"></Icon>{{item.label}}
	                            </template>
	                        	<menu-item v-for="mi in item.menuitems" :name="mi.name">{{mi.label}}</menu-item>
	                        </Submenu>
	                    </i-menu>
	                </i-col>
	                <i-col span="19">
	                    <div class="layout-content-main" >
							<Tabs type="card" @on-tab-remove="removeTab" @on-click="clickTab" :animated="false" :value="activeTab">
								<template v-for="(item,index) in mainTabs">
							        <tab-pane :label="item.label" closable :name="item.name" v-if="item.show">
							        		<iframe frameborder="0" width="100%" :height="frameHeight" marginheight="0" scrolling="auto" marginwidth="0" :src="item.url"></iframe>
							        </tab-pane>
								</template>
						    </Tabs>
						</div>
	                </i-col>
	            </Row>
	        </div>
	        <div class="layout-copy">
	            2017-2018 &copy; http://wallimn.iteye.com
	        </div>
	    </div>	 
	</div>

	<script type="text/javascript">
		var vue = new Vue({
			el:'#app',
			data:function(){
				return {
					menuData:[
	                	{	label:'菜单1',name:"m1",
	                		menuitems:[
	                			{name:'m1-1',label:'菜单1-1',url:'iview.html'},
	                			{name:'m1-2',label:'菜单1-2',url:'grid.html'},
	                			{name:'m1-3',label:'菜单1-3',url:'button.html'},
	                			{name:'m1-4',label:'菜单1-4',url:'table.html'},
	                		]
	                	},
	                	{	label:'菜单2',name:"m2",
	                		menuitems:[
	                			{name:'m2-1',label:'菜单2-1',url:'http://wallimn.iteye.com'},
	                			{name:'m2-2',label:'菜单2-2',url:'m2-1.html'},
	                			{name:'m2-3',label:'菜单2-3',url:'m2-1.html'},
	                			{name:'m2-4',label:'菜单2-4',url:'m2-1.html'},
	                		]
	                	},
	                	{	label:'菜单3',name:"m3",
	                		menuitems:[
	                			{name:'m3-1',label:'菜单3-1',url:'m3-1.html'},
	                			{name:'m3-2',label:'菜单3-2',url:'m3-1.html'},
	                			{name:'m3-3',label:'菜单3-3',url:'m3-1.html'},
	                			{name:'m3-4',label:'菜单3-4',url:'m3-1.html'},
	                		]
	                	},
	                	{	label:'菜单4',name:"m4",
	                		menuitems:[
	                			{name:'m4-1',label:'菜单4-1',url:'m4-1.html'},
	                			{name:'m4-2',label:'菜单4-2',url:'m4-1.html'},
	                			{name:'m4-3',label:'菜单4-3',url:'m4-1.html'},
	                			{name:'m4-4',label:'菜单4-4',url:'m4-1.html'},
	                		]
	                	}
	                ],
	                activeTab:null,
	                mainHeight: 0,
	                frameHeight: 0,
	                mainTabs:[]
	            };
	        },
	        mounted:function(){
	        	this.setFrameHeight();
	        },
	        methods:{
	        	clickTab:function(name){
	        		var vm=this;
	        		vm.frameHeight -= 1;
	        		//解决chrome浏览器中tab切换滚动条消失的问题。
	        		window.setTimeout(function(){
	        			vm.frameHeight=vm.frameHeight+1;
	        		},100);
	        	},
	        	//根据名称来查找对应的菜单条目
	        	getMenuItem:function(name){
	        		for(var sm=0; sm<this.menuData.length; sm++){
	        			for(var mi=0; mi<this.menuData[sm].menuitems.length; mi++){
	        				if(this.menuData[sm].menuitems[mi].name==name)return this.menuData[sm].menuitems[mi];
	        			}
	        		}
	        		return {};//这个应该不可能发生
	        	},
	        	//根据名称查找对应的Tab页。
	        	getTab:function(name){
	        		for(var i=0; i<this.mainTabs.length; i++){
	        			if(this.mainTabs[i].name==name)return this.mainTabs[i];
	        		}
	        		return null;//没有找到
	        	},
	        	//设置Tab页不可见。
	        	removeTab:function (name) {
	        		var tab = this.getTab(name);
	        		if(tab!=null)tab.show=false;
	                console.log("mainTabRemove, name=",name,", label=",tab.label,", url=",tab.url);
	            },
	            setFrameHeight:function(){
	            	//调整掉一些补白的值
	            	this.mainHeight = (document.documentElement.scrollHeight || document.body.scrollHeight)-90-90;
	            	this.frameHeight = this.mainHeight-90;
	            },
	            //菜单点击
	            menuSelect:function(name){
	            	this.$Message.info(name);
	            	var tab = this.getTab(name);
	            	if(tab==null){
		            	var mi = this.getMenuItem(name);
		            	var mi = $.extend({},mi,{show:true});
		            	this.mainTabs.push(mi);
	            	}
	            	else{
	            		tab.show=true;
	            	}
	            	this.activeTab=name;
	            },
	            onAuthor:function(){
	            	this.$Message.info("wallimn，http://wallimn.iteyey.com");
	            }
			}
		});
		
		
		window.onresize=function(){
			vue.setFrameHeight();
		}
	</script>
</body>
</html>

查看图片附件

分享到：

vue.js不同组件之间通信 | 前端框架iviewui使用示例之menu

2017-12-06 15:21
浏览 35662
评论(2)
分类:Web前端
查看更多

2 楼 wallimn 2018-05-19

水淼火写道

你好,我使用以后,图标不显示,应该怎么引用呢,谢谢

打开开发者工具，看看是不是有什么资源没有找到。再看看iviewui的代码有没有转化为正常的HTML代码。

1 楼水淼火 2018-05-18

你好,我使用以后,图标不显示,应该怎么引用呢,谢谢

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

前端框架iviewui使用示例之菜单+多Tab页布局

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

前端框架iviewui使用示例之菜单+多Tab页布局

评论

发表评论

相关推荐

gradle编译错误：Could not find method compile() for arguments

netty心跳检查之UDP篇

解决tomcat部署两个SpringBoot应用提示InstanceAlreadyExistsException

Eclipse配置MyBatis代码自动化功能

vue.js中使用qrcode生成二维码

MySQL插入数据报错： Incorrect string value: '\xFD\xDE'

vue自定义组件并双向绑定属性

vue-router简单示例

“联通充值系统繁忙”轻松应对

electron.js数据库应用---导航菜单(element-ui+mysql)

electron.js数据库应用---入门(mysql+element-ui)

SpringMVC 在controller层中注入成员变量request，是否线程安全

VueJS 组件参数名命名与组件属性转化

vue-resource拦截器实现token发送及检验自动化

element-ui试用手记

iviewui中表格控件中render的使用示例

Tomcat错误“Alias name tomcat does not identify a key entry”解决

阿里云免费证书“fileauth.txt内容配置错误”解决

springboot2.0跨域配置

微信小程序使用code换openid的方法（JAVA、SpringBoot）

最近访客更多访客>>