引入

在 main.js 中加入

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

事件绑定

@

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

Grid栅栏

基础

1
2
3
4
<Row>
<Col span="12">col-12</Col>
<Col span="12">col-12</Col>
</Row>

区块间隔

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

1
<Row :gutter="16">

栅格顺序

Flex

1
2
3
4
5
6
<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>

栅格排序

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

左右偏移

offset=”8”

Flex布局

justify可以为

  1. start 左
  2. end 右
  3. center 居中
  4. space-between 子元素等宽排列
  5. space-around 子元素分散排列
    1
    2
    3
    4
    5
    6
    <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 布局下的垂直对齐方式,可选值为topmiddlebottom String -
justify flex 布局下的水平排列方式,可选值为startendcenterspace-aroundspace-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 -