解决:复杂布局、多重标记(前后端校验、标记信息等)方案。 特点:高度灵活性、可控性、扩展性。
npm i vue-form-layer -S
import VueFormLayer from 'vue-form-layer'
import 'vue-form-layer/dist/vue-form-layer.css'
Vue.use(VueFormLayer)
// 或者直接使用script导入
<script src="https://unpkg.com/vue-form-layer/dist/vue-form-layer.min.js"></script>
<script src="https://unpkg.com/vue-form-layer/dist/vue-form-layer.css"></script>
<vue-form :model="form">
<vue-form-line
:cols="[{ label: '名字' },
{ label: '年龄' }]">
<input type="text" v-model="form.name">
<input type="text" v-model="form.age">
</vue-form-line>
</vue-form>
<vue-form :model="form" :layer="layer">
<vue-form-line
:cols="[{ label: '名字', prop: '/form/name' },
{ label: '年龄', prop: '/form/age'}]">
<input type="text" v-model="form.name">
<input type="text" v-model="form.age">
</vue-form-line>
</vue-form>
<script>
export default {
data () {
return {
form: {},
layer: [
{
id: "layer-1",
show: true,
data: [
{
prop: "/form/name",
data: "我是名字"
},
{
prop: "/form/age",
data: "我是年龄"
}
]
},
]
}
}
}
</script>
<vue-form :model="form" :layer="layer">
<vue-form-line
:cols="[{ label: '名字', prop: '/form/name' },
{ label: '年龄', prop: '/form/age'}]">
<input type="text" v-model="form.name">
<input type="text" v-model="form.age">
</vue-form-line>
</vue-form>
<script>
export default {
data () {
var templateFn = data => {
return
// your component
// vue1.0支持 this.$createElement("component", { attrs: { data: data } });
// vue2.0支持jsx
// 可以直接写 <component data={data}></component>
// 或者写引入的组件
// 不支持的可以
npm install\
babel-plugin-syntax-jsx\
babel-plugin-transform-vue-jsx\
babel-helper-vue-jsx-merge-props\
babel-preset-es2015\
--save-dev
// .babelrc
{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}
// 然后就可以愉快地写jsx了
};
return {
form: {},
layer: [
{
id: "layer-1",
show: true,
data: [
{
prop: "/form/name",
template: templateFn,
data: // your show data
},
{
prop: "/form/age",
data: "我是年龄"
}
]
},
]
}
}
}
</script>
<vue-form :model="form" ref="form" :layer="layer">
<vue-form-line
:cols="[{ label: '名字', prop: '/form/name' },
{ label: '年龄', prop: '/form/age'}]">
<input type="text" v-model="form.name" @blur="recalculateField('/form/name')">
<input type="text" v-model="form.age" @blur="recalculateField('/form/age')">
</vue-form-line>
</vue-form>
<script>
export default {
data () {
const successValidate = {
disabled: true,
referenceBorderColor: "#67c23a"
};
const errorValidate = message => {
return {
message: message,
disabled: false,
referenceBorderColor: "#F56C6C"
};
};
const recalculateName = value => {
if (value === "") {
return errorValidate("name is required");
} else {
return successValidate;
}
};
const recalculateAge = value => {
if (value === "") {
return errorValidate("age is required");
} else if (value < 18) {
return errorValidate("age not less then 18");
} else {
return successValidate;
}
};
return {
form: {},
layer: [
{
id: "layer-1",
show: true,
view: {
disabled: true
},
data: [
{
prop: "/form/name",
recalculate: recalculateName,
data: ""
},
{
prop: "/form/age",
recalculate: recalculateAge,
data: ""
}
]
},
]
}
},
methods: {
recalculateField(prop) {
this.$refs['form'].recalculateField('layer-1', prop);
}
}
}
</script>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
model | form对象,用于重算及重置 | object/array | - | - |
layer | 图层数组 | array | - | - |
mark | 启用标记信息组件 | boolean | - | false |
markContent | (prop, show) => {} | funtion | - | - |
markEffect | 用于设置标记组件主题,接受传入一个颜色值 | string | light/dark | light |
label-width | 表单域标签的宽度 | string | - | - |
labelPosition | label的位置 | string | left/right/top | right |
line-height | form-item 内label及content行高 | string | - | '32px' |
rowledge | form-item 行距 | string | - | '24px' |
item-gutter | form-item 之间的间隔 | number | - | 0 |
response | 表单响应式,只在手机端生效 | boolean | - | true |
方法名 | 说明 | 参数 |
---|---|---|
changeShow | 改变图层展示状态 | 图层ID |
recalculate | 对整个表单进行重算的方法,参数id是进行重算的图层ID,第二个参数是回调函数 | Function(id, callback: Function(boolean)) |
recalculateField | 对部分表单字段进行重算的方法,参数 (id: 图层id, prop: item prop),不传参数则进行全局重算 | id: string, prop: string |
clearCalculate | 移除表单项的重算结果。参数 (id: 图层id, prop: 传入待移除的表单项的 prop 属性组成的数组,如不传则移除整个表单的重算结果) | id: string,props: array |
resetFields | 对表单进行重置,将所有字段值重置为初始值并移除重算结果。参数 (id: 图层id, prop: 传入待移除的表单项的 prop 属性组成的数组,如不传则移除整个表单进行重置) | props: array |
事件名称 | 说明 | 回调参数 |
---|---|---|
show | 显示时触发 | prop |
hide | 隐藏时触发 | prop |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
id | 图层id | string | - | - |
show | 图层是否展示 | boolean | - | true |
view | 图层默认配置 | object | - | - |
data | 图层item配置 | object | - | - |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | layer 展示类型 | string | popover/text | popover |
effect | layer 主题或颜色,如果传入色值则主题颜色为该色值 | string | light/dark/info/error | light |
borderColor | layer 的border颜色 | string | - | "#ccc" |
referenceBorderColor | reference 的border颜色 | string | - | - |
recalculate | layer 默认重算规则 (value) => {return {effect: 主题颜色, disabled: 是否禁用, referenceBorderColor: reference边框颜色} | function | - | - |
placement | layer 展示位置 | string | top/right/bottom/left | top |
target | layer 默认为default(传入form-line的dom),target存在时会修改触发目标,(data) => {return 模板/组件 },多个图层同时指向default时,排列显示 | string/function | why/warn | default |
disabled | layer 是否禁用 | boolean | - | false |
trigger | layer 触发方式 | string | hover/focus/click | hover |
hideDelay | layer 隐藏延时 | number | - | 200 |
showAlways | layer 是否总是显示 | boolean | - | false |
enterable | layer为popover时,鼠标是否可移入 | boolean | - | false |
visible-arrow | layer为popover时,是否显示箭头 | boolean | - | true |
template | 数据展示模板 (data, prop, show) => {return 模板/组件 }, 回调参数data是数据,回调参数prop是模板位置,回调读书show是模板所在图层展示状态 | function | - | top |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
prop | 使用该配置的prop字段,如不传则该配置不会作用于任何字段 | - | - | - |
data | 展示数据,传入模板template则通过模板展示数据,object/array类型需要传模板 | string/object/array | - | - |
recalculate | 字段重算规则 (value) => {return {message: 展示文字,effect: 主题颜色, disabled: 是否禁用, borderColor: 边框颜色} | function | - | - |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
cols | item布局配置 | array | [] |
span | form-line在一行分成24份中所占的份数 | number | 24 |
label-width | 表单域标签的宽度 | string | - |
label | 子节点并排展示时使用,form-line设置label后,子节点设置的label将失效 | string | - |
required | 子节点并排展示时使用 | boolean | false |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
span | item在form-line分成24份中所占的份数 | number | 24 |
label | item label名 | number | - |
prop | 校验的字段,在需要校验时是必须的 | string | - |
label-width | 表单域标签的宽度 | string | "80px" |
required | 是否必填(只提供样式,校验规则要在图层定义) | boolean | false |
2018-4-22
-
迁移到 rollup,优化组件打包,支持esm格式。
-
form 增加 isTable 属性,以更少的node渲染 table,提高渲染性能。
2018-4-8
- 图层使用懒加载,在鼠标移入reference或重算时加载,提高组件渲染性能。
2018-4-8
- form增加line-height属性。