引入

在 main.js 中加入

import iView from 'iview';
import 'iview/dist/styles/iview.css';    // 使用 CSS
Vue.use(iView);

事件绑定

@ 如

<Input v-model="value" @on-change="tishi" placeholder="请输入..." style="width: 300px"></Input>  

Grid栅栏

基础

<Row>
  <Col span="12">col-12</Col>
  <Col span="12">col-12</Col>
</Row>

区块间隔

给 row 添加 gutter 属性 (16+8n)px

<Row :gutter="16">

栅格顺序

Flex

<Row type="flex">
  <Col span="6" order="4">1 | order-4</Col>
  <Col span="6" order="3">2 | order-3</Col>
  <Col span="6" order="2">3 | order-2</Col>
  <Col span="6" order="1">4 | order-1</Col>
</Row>

栅格排序

push="6" // 右推6
pull="18" // 左拉18

左右偏移

offset="8"

Flex布局

justify可以为

1. start 左
2. end 右
3. center 居中
4. space-between 子元素等宽排列
5. space-around 子元素分散排列

<Row type="flex" justify="start" class="code-row-bg">
  <Col span="4">col-4</Col>
  <Col span="4">col-4</Col>
  <Col span="4">col-4</Col>
  <Col span="4">col-4</Col>
</Row>

Flex对齐

align: 1. top 2. bottom 3. middle

响应式布局

xs sm md lg 四个响应尺寸 span pull push offset order 属性可以通过内嵌到 xs sm md lg 属性中来使用

API

#

Row props

#

属性	说明	类型	默认值
gutter	栅格间距，单位 px，左右平分	Number	0
type	布局模式，可选值为flex或不选，在现代浏览器下有效	String	-
align	flex 布局下的垂直对齐方式，可选值为top、middle、bottom	String	-
justify	flex 布局下的水平排列方式，可选值为start、end、center、space-around、space-between	String	-
class-name	自定义的class名称	String	-

Col props

#

属性	说明	类型	默认值
span	栅格的占位格数，可选值为0~24的整数，为 0 时，相当于display:none	Number \	String	-
order	栅格的顺序，在flex布局模式下有效	Number \	String	-
offset	栅格左侧的间隔格数，间隔内不可以有栅格	Number \	String	-
push	栅格向右移动格数	Number \	String	-
pull	栅格向左移动格数	Number \	String	-
class-name	自定义的class名称	String	-
xs	<768px 响应式栅格，可为栅格数或一个包含其他属性的对象	Number \	Object	-
sm	≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象	Number \	Object	-
md	≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象	Number \	Object	-
lg	≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象	Number \	Object	-