IView 2.0.0入门案例

原创
2017/03/18 22:45
阅读数 1.5W

       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 &copy; 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

 

展开阅读全文
打赏
2
5 收藏
分享
加载中
更多评论
打赏
0 评论
5 收藏
2
分享
返回顶部
顶部