iView 是Vue框架开发的UI框架，在iView1.0版本的时候就开始关注，但是未做过案例。截止目前，官网尚未更新iView2.0.0的案例及文档。今天终于抽了点时间做了个简单的案例，起抛砖引玉作用的同时，也在后续分享一下iView2.0.0快速开发。
先上代码，
<html>
<head>
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/iview@2.0.0-rc.5/dist/styles/iview.css">
<style>
.layout{
*border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.layout-breadcrumb{
padding: 10px 15px 0;
}
.layout-content{
min-height: 200px;
margin: 15px;
overflow: hidden;
background: #fff;
border-radius: 4px;
}
.layout-content-main{
padding: 10px;
}
.layout-copy{
text-align: center;
padding: 10px 0 20px;
color: #9ea7b4;
}
.layout-menu-left{
background: #464c5b;
}
.layout-header{
height: 50px;
background: #fff;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.layout-logo-left{
width: 90%;
height: 30px;
background: #5b6270;
border-radius: 3px;
margin: 15px auto;
}
.layout-ceiling-main a{
color: #9ba7b5;
}
.layout-hide-text .layout-text{
display: none;
}
.ivu-col{
transition: width .2s ease-in-out;
}
</style>
</head>
<body>
<div id="app">
<div class="layout" :class="{'layout-hide-text': spanLeft < 5}">
<Row type="flex">
<i-col :span="spanLeft" class="layout-menu-left">
<i-menu active-name="1-2" theme="dark" width="auto" :open-names="['1']">
<div class="layout-logo-left"></div>
<Submenu name="1">
<template slot="title">
<Icon type="ios-navigate" :size="iconSize"></Icon>
<span class="layout-text">导航一</span>
</template>
<Menu-item name="1-1">选项 1</Menu-item>
<Menu-item name="1-2">选项 2</Menu-item>
<Menu-item name="1-3">选项 3</Menu-item>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad" :size="iconSize"></Icon>
<span class="layout-text">导航二</span>
</template>
<Menu-item name="2-1">选项 1</Menu-item>
<Menu-item name="2-2">选项 2</Menu-item>
</Submenu>
<Submenu name="3">
<template slot="title">
<Icon type="ios-analytics" :size="iconSize"></Icon>
<span class="layout-text">导航三</span>
</template>
<Menu-item name="3-1">选项 1</Menu-item>
<Menu-item name="3-2">选项 2</Menu-item>
</Submenu>
</i-menu>
</i-col>
<i-col :span="spanRight">
<div class="layout-header">
<i-button type="text" @click="toggleClick">
<Icon type="navicon" size="32"></Icon>
</i-button>
</div>
<div class="layout-breadcrumb">
<Breadcrumb>
<Breadcrumb-item href="#">首页</Breadcrumb-item>
<Breadcrumb-item href="#">应用中心</Breadcrumb-item>
<Breadcrumb-item>某应用</Breadcrumb-item>
</Breadcrumb>
</div>
<div class="layout-content">
<div class="layout-content-main" :style="contentStyle">内容区域</div>
</div>
<div class="layout-copy">
2016-2017 © 027wh
</div>
</i-col>
</Row>
</div>
</div>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/iview@2.0.0-rc.5/dist/iview.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
spanLeft: 5,
spanRight: 19,
theme1: 'dark'
},
computed:{
iconSize:function () {
return this.spanLeft === 5 ? 14 : 24;
},
contentStyle: function(){
var innerHeight = window.innerHeight;
var contentHeight = innerHeight-50-110;
return "min-height: "+contentHeight+"px";
}
},
methods: {
toggleClick: function() {
if (this.spanLeft === 5) {
this.spanLeft = 2;
this.spanRight = 22;
} else {
this.spanLeft = 5;
this.spanRight = 19;
}
}
}
})
</script>
</body>
</html>
效果图：
不得不说，iView是一个比较强大的UI框架。在HTML5的盛行，UI框架如雨后春笋，各种框架层出不穷，iView2.0.0是在vue2.0的基础上开发的。这个案例使用的iView的版本是2.0.0-rc.5。
关键点，
1. iView采用了24栅格系统，所以，在案例中你会看到这样的，
data: {
spanLeft: 5,
spanRight: 19,
theme1: 'dark'
},
表示左边区域是占了5/24。
同样，点击收缩按钮时，
toggleClick: function() {
if (this.spanLeft === 5) {
this.spanLeft = 2;
this.spanRight = 22;
} else {
this.spanLeft = 5;
this.spanRight = 19;
}
}
2.这组代码旨在将撑满整个Body。
contentStyle: function(){
var innerHeight = window.innerHeight;// 这里注意，只是针对Chrome浏览器的算法
var contentHeight = innerHeight-50-110;
return "min-height: "+contentHeight+"px";
}
3.在这个案例中的，iView 2.0.0比1.0版本做的改动有
a) 所有的menu标签中的key改为name
b) Menu标签改为 i-menu
