1.0.3 • Published 3 years ago
y-grid v1.0.3
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 | 无 | 标签文本 |