y-grid

现在封装一套iview-ui的from的 grid布局

安装插件（Installation）

npm install y-grid --save

Include plugin in your main.js file.

import Vue from 'vue'
import {Grid,GridItem} from 'y-grid'
Vue.use(Grid)
Vue.use(GridItem)

在页面中使用（Usage）

<template>
  <div id="app">
    <Grid column='6' :model="tableFilter" ref="formName" colon :labelPosition="'left'" :labelWidth="100">
        <GridItem column='1' label="活动名称" prop="name">
            <Input v-model="tableFilter.name"></Input>
        </GridItem>
        <GridItem column='1' label="活动形式" prop="desc">
            <Input v-model="tableFilter.desc"></Input>
        </GridItem>
    </Grid>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      tableFilter:{}
    }
  }
}
</script>

Grid属性

|name|default|description| |---|---|---| |column|2|一行分几格| |labelWidth|无|表单域标签的宽度(Number)| |labelPosition|null|表单域标签的位置，支持left，top，right| |columnGap|30|间距(px)| |rowGap|10|行距(px)| |colon|false|是否自动在 label 名称后添加冒号|

GridItem属性

|name|default|description| |---|---|---| |column|1|占几格| |label|无|标签文本|