# 数据字段 prop
prop 是辨别当前组件的唯一字段,既是
model 和 options 的键值 key
,又是el-form
使用validate、resetFields
方法的必填字段,所以需保证 prop的 唯一性
# 组件类型 type
SchemaForm 的组件是基于 Element 进行封装,目标是完美兼容原组件的所有属性
# 内置类型
类型 | 含义 | 属性参考 |
---|---|---|
input | 输入框 | el-input |
select | 选择器 | el-select |
radio | 单选框组 | el-radio-group |
checkbox | 多选框组 | el-checkbox-group |
cascader | 级联选择器 | el-cascader |
switch | 开关 | el-switch |
slider | 滑块 | el-slider |
datepicker | 日期选择器 | el-date-picker |
timeselect | 固定时间 | el-time-select |
timepicker | 任意时间 | el-time-picker |
colorpicker | 颜色选择器 | el-color-picker |
progress | 进度条 | el-progress |
rate | 评分 | el-rate |
# 表单属性 formItem
兼容所有el-form-item的属性,以下内容为常用属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
label | 标签文本 | string | — | — |
label-width | 表单域标签的的宽度,例如 '50px'。支持 auto | string | — | — |
show-message | 是否显示校验错误信息 | boolean | — | true |
inline-message | 以行内形式展示校验信息 | boolean | — | false |
size | 用于控制该表单域下组件的尺寸 | string | medium / small / mini | - |
# 绑定值修饰符 modifier
为了更好的支持数值绑定,增加了
v-model
的修饰符,现支持
参数 | 说明 |
---|---|
number | 自动将用户的输入值转为数值类型 |
trim | 自动过滤用户输入的首尾空白字符 |
# 属性绑定 attrs
支持Element组件的属性,以
el-input
为例,具体参数 可参考 Element
{
type: 'input',
prop: 'name',
attrs: { type: 'textarea' }
}
# 动态属性绑定 dynamicAttrs
除了绑定的静态属性外,还支持动态属性的绑定,例如用于与其它操作联动
{
type: 'input',
prop: 'name',
dynamicAttrs: { disabled: !!this.model.id }
}
# 事件绑定 on
支持Element组件的事件,以
el-input
为例,具体参数 可参考 Element
{
type: 'input',
prop: 'name',
on: { focus: this.onNameFocus }
}
# 事件 & 按键修饰符
对于 .passive、.capture 和 .once 这些事件修饰符, Vue 提供了相应的前缀可以用于 on
修饰符 | 前缀 |
---|---|
.passive | & |
.capture | ! |
.once | ~ |
.capture.once 或 .once.capture | ~! |
on: {
'!click': this.doThisInCapturingMode,
'~keyup': this.doThisOnce,
'~!mouseover': this.doThisOnceInCapturingMode
}
对于所有其它的修饰符,私有前缀都不是必须的,因为你可以在事件处理函数中使用事件方法:
on: {
keyup: function (event) {
// .self 等价于 如果触发事件的元素不是事件绑定的元素则返回
if (event.target !== event.currentTarget) return
// 如果按下去的不是 enter 键或者
// 没有同时按下 shift 键
// 则返回
if (!event.shiftKey || event.keyCode !== 13) return
// 阻止 事件冒泡
event.stopPropagation()
// 阻止该元素默认的 keyup 事件
event.preventDefault()
// ...
}
}
# 插槽 slot
参数 | 说明 |
---|---|
slot | 自定义完整组件 |
labelSlot | 用于 el-form-item 中的 label插槽 |
frontSlot | 定义element 组件前的插槽 |
rearSlot | 定义element 组件后的插槽 |
← SchemaForm layout 布局 →