第十五課時: 響應式佈局

vue-cli3.0中使用iview

1.全局引入

在項目入口文件./main.js中須要配置以下：

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

Vue.use(iview)

2.按需引入

首先你須要安裝一個babel插件: npm install babel-plugin-import --save-dev

在vue-cli3生成的項目中，babel的配置文件是babel.config.js，默認配置是這樣的：

module.exports = {
  presets: [
    '@vue/app'
  ]
}

你須要將剛剛安裝的插件添加進去，添加後的內容以下：

module.exports = {
  presets: [
    '@vue/app'
  ],
  'plugins': [['import', {
    'libraryName': 'iview',
    'libraryDirectory': 'src/components'
  }]]
}

接下來在main.js裏你能夠這樣按需引入：

import 'iview/dist/styles/iview.css' // iview的樣式文件仍是要引入的
import { Button, Table } from 'iview'
Vue.component('Button', Button)

在非template/render模式下，包括JSX寫法中，組件名要用分隔形式，如DatePicker要寫爲date-picker。而對於iview中名稱和原生HTML標籤名相同的組件，須要加i-前綴，如Button要寫爲i-button。

咱們能夠經過配置iview-loader來解決Switch在任何模式下都必須寫爲i-switch，Circle要寫爲i-circle的問題。

3.vue-cli3.0中配置iview-loader

首先須要安裝iview-loader：

npm install iview-loader --save-dev

接下來在vue.config.js中添加iview-loader：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('iview')
      .loader('iview-loader')
      .options({prefix: false})
  }
}

佈局組件的使用

效果:

代碼

<Layout>
        <Sider hide-trigger>Sider</Sider>
        <Layout>
            <Header>Header</Header>
            <Content>Content</Content>
            <Footer>Footer</Footer>
        </Layout>
    </Layout>

效果:

代碼:

<template>
  <div class="layout-wrapper">
    <Layout class="layout-outer">
      <Sider collapsible breakpoint="sm" reverse-arrow v-model="collapsed"></Sider>
      <Layout>
        <Header class="header-wrapper">
          <Icon :class="triggerClasses" @click.native="handleCollapsed" type="md-menu" :size="32"/>
        </Header>
        <Content class="content-con">
          <Card shadow class="page-card">
            <router-view/>
          </Card>
        </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 rgba(0, 0, 0, .1);
    padding: 0 23px;
    .trigger-icon{
      cursor: pointer;
      transition: transform .3s ease;
      &.rotate{
        transform: rotateZ(-90deg);
        transition: transform .3s ease;
      }
    }
  }
  .content-con{
    padding: 10px;
  }
  .page-card{
    min-height: ~"calc(100vh - 84px)";
  }
}
</style>

柵格組件實現響應式佈局

咱們採用了24柵格系統，將區域進行24等分，這樣能夠輕鬆應對大部分佈局問題。使用柵格系統進行網頁佈局，能夠使頁面排版美觀、溫馨。

咱們定義了兩個概念，行row和列col，具體使用方法以下：

• 使用row在水平方向建立一行
• 將一組col插入在row中
• 在每一個col中，鍵入本身的內容
• 經過設置col的span參數，指定跨越的範圍，其範圍是1到24
• 每一個row中的col總和應該爲24

注意：非 template/render 模式下，需使用 i-col。