1.0.0 • Published 2 years ago

y-grid-ant v1.0.0

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

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属性

namedefaultdescription
column2一行分几格
labelWidth表单域标签的宽度(Number)
labelPositionnull表单域标签的位置,支持left,top,right
columnGap30间距(px)
rowGap10行距(px)
colonfalse是否自动在 label 名称后添加冒号

GridItem属性

namedefaultdescription
column1占几格
label标签文本