Vue使用ivew组件实现响应式布局

1.vue-cli3.0中使用iview

链接: Vue-cli3.0中使用iview.
1.在控制台启动vue ui

2.在vue ui中搜索并安装iview
或者直接在控制台输入

cnpm install iview

3.安装好后重启项目
4.在main.js中引入

import iview from 'iview'
import 'iview/dist/styles/iview.css'

Vue.use(iview)

2.布局组件的使用

1.在views文件夹中创建layout.vue文件

<template>
  <div>
    
  </div>
</template>
<script>
export default {
  
}
</script>
<style lang="less">
  
</style>

2.在rooter.js中引入，这里我们就把首页作为路由

import Layout from '@/views/layout.vue'

{
    path: '/',
    alias: '/homee',
    name: 'Home',
    component: Layout
  }

3.在app.vue页面配置，并为icon设置动画

<template>
  <div id="app">
    <router-view key="default" />
  </div>
</template>

<script>
export default {
  name: 'app',
  components: {
  }
}
</script>

<style >
 #app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
   height: 100%;
}
html,body{
  height: 100%;
}
body{
  margin: 0;
}
</style>

4.在layout.vue中进行配置，并实现icon动效

<template>
  <div class="layout-wrapper">
    <Layout class="layout-outer">
      <!-- Sider有一个collapsible属性 可以设置是否收缩 -->
      <!-- 通常要配合v-model使用 -->
      <!-- hide-trigger用于隐藏默认的小按钮 -->
      <Sider collapsible hide-trigger v-model="collapsed"></Sider>
      <Layout>
        <Header class="header-wrapper">
          <!-- icon组件我们是没有定义clik组件的，所以我们要使用native修饰符在最外面的html标签上进行绑定-->
          <!-- 为icon绑定一个类，用来添加动画,我们在下面的计算属性中进行配置-->
          <Icon :class="triggerClasses" type='md-menu' @click.native="handleCollapsed"></Icon>
        </Header>
        <Content></Content>
     </Layout>
    </Layout>
  </div>
</template>
<script>
export default {
  data () {
    return {
      collapsed: false
    }
  },
  computed: {
    triggerClasses () {
      return [
        'trigger-icon',
        this.collapsed ? 'rotate' : ''
      ]
    }
  },
  methods: {
    handleCollapsed () {
      this.collapsed = !this.collapsed
    }
  }
}
</script>
<style lang="less">
.layout-wrapper, .layout-outer{
  height: 100%;
  .header-wrapper{
    background: #fff;
    box-shadow: 0 1px 1px 1px rgha(0, 0, 0, .1);
    padding-left: 10px;
    .trigger-icon{
      cursor: pointer;
      transition: transform .3s ease;
      //当类名为
      &.rotate{
        transform: rotateZ(-90deg);
        transition: transform .3s ease;
      }
    }
  }
}

</style>

5.breakpoint触发响应式布局的断点，可选值为xs,sm,md,lg,xl或xxl，若不设此属性则不会触发响应式布局。
breakpoint width

    {
        xs: '480px',
        sm: '576px',
        md: '768px',
        lg: '992px',
        xl: '1200px',
        xxl: '1600px'
    }
        

我们对sider进行设置，当浏览器页面小于576px时候sider会隐藏

<Sider collapsible hide-trigger breakpoint='sm' v-model="collapsed"></Sider>

3.栅格组件实现响应式布局

ivew采用了24栅格系统，将区域进行24等分，这样可以轻松应对大部分布局问题。使用栅格系统进行网页布局，可以使页面排版美观、舒适。
ivew定义了两个概念，行row和列col，具体使用方法如下：
使用row在水平方向创建一行
将一组col插入在row中
在每个col中，键入自己的内容
通过设置col的span参数，指定跨越的范围，其范围是1到24
每个row中的col总和应该为24

页面组件的嵌套

1.在上面的基础上，我们对content进行配置

<Content class="content-con">
          <Card shadow class="page-card" >
           
          </Card>
</Content>

.layout-wrapper, .layout-outer{
 	height: 100%;
  .content-con{
    padding: 10px;
  }
  .page-card{
    // 表示页面的整体高度减去上边header的高度
    min-height: ~"calc(100vh - 84px)";
  }
}

2.把layout.vue视为父组件，使用嵌套路由，将嵌套路由里的视图显示在card标签中

<Content class="content-con">
          <Card shadow class="page-card" >
            <router-view>
          </Card>
        </Content>

在rooter.js路由配置中进行配置

{
    path: '/',
    alias: '/homee',
    name: 'Home',
    component: Layout,
    children: [
      {
        path: 'home',
        component: Home
      }
    ]
  }

可以看到home页面组件中的视图在card中显示

栅格组件的布局
1.我们在Home.vue中进行配置演示

<template>
  <div class="home">
    <Row>
      <i-col></i-col>
    </Row>
    <!-- gutter用来设置每一行的间距 -->
    <Row :gutter='10'>
      <!-- span栅格的占位格数，可选值为0~24的整数，为 0 时，相当于display:none-->
      <i-col span='12'></i-col>
      <i-col span='12'></i-col>
    </Row>
    <Row :gutter='10' class="blue">
      <!-- offset会使当前col想右移一格，会影响行内其他col -->
      <!-- push会使当前col想右移一格，不影响行内其他col -->
      <!-- pull会使当前col想左移一格，不影响行内其他col -->
      <i-col span='4' offset='1'></i-col>
      <i-col span='4' push='1'></i-col>
      <i-col span='4'></i-col>
    </Row>
  </div>
</template>

<style lang="less">
  .home{
  //这里的ivu-col为控制塔中显示的类名可以直接使用
    .ivu-col{
      height: 50px;
      margin-top: 10px;
      background: pink;
      background-clip: content-box;
    }
 	.blue{
      .ivu-col{
      background: blue;
      background-clip: content-box;
      }
    }
  }
</style>

2.设置响应式栅格
xs当屏幕小于768px时当前col会占几列
sm当屏幕大于等于768px时当前col会占几列
md当屏幕大于等于992px时当前col会占几列
lg当屏幕大于等于1200px时当前col会占几列

<Row :gutter='10' class="blue">
      <i-col :md='6' :sm='12' :xs='24'></i-col>
      <i-col :md='6' :sm='12' :xs='24'></i-col>
      <i-col :md='6' :sm='12' :xs='24'></i-col>
      <i-col :md='6' :sm='12' :xs='24'></i-col>
 </Row>