# 自定义设计器字段
高级版本@1.2.13 新增功能
可以在设计器左侧配置自己的组件进行操作。
# 自定义组件
我们简单实现个自定义组件如下:
<template>
<div class="custom-component">
<span>
宽:<el-input v-model="dataModel.width" style="width: 200px;"></el-input>
</span>
<span>
高:<el-input v-model="dataModel.height" style="width: 200px;"></el-input>
</span>
</div>
</template>
<script>
export default {
name: 'custom-width-height',
props: {
value: {
type: Object,
default: () => ({})
}
},
data() {
return {
dataModel: this.value
}
},
watch: {
value (val) {
this.dataModel = val
},
dataModel (val) {
this.$emit('input', val)
}
}
}
</script>
<style lang="scss">
.custom-component{
background: #eee;
padding: 10px;
span{
+span{
margin-left: 10px;
}
}
}
</style>
需要注意,自定义组件必须能够使用
v-model
进行双向绑定,如果还不知道如何创建,可以自行先阅读 Vue.js 文档。
# 注册组件
Vue.use(FormMaking, {
components: [{
name: 'custom-width-height',
component: CustomComponent // 自定义组件
}]
})
也可以使用 Vue.component
进行组件的注册
# 设计器配置
<template>
<fm-making-form
:custom-fields="customFields"
>
</fm-making-form>
</template>
<script>
export default {
data() {
return {
customFields: [
{
name: '自定义组件', // 字段名称
el: 'custom-width-height', // 组件注册的名称
options: {
/* 下面是设计器中自带的字段属性,可以根据自己组件的属性来进行配置 */
defaultValue: {}, // 默认值
customClass: '', // 自定义样式
labelWidth: 100, // 标签宽度
isLabelWidth: false, // 是否展示标签
hidden: false, // 隐藏属性
dataBind: true, // 数据绑定属性
width: 100,
height: 100,
placeholder: '',
readonly: false, // 只读
disabled: false, // 禁用
editable: false, // 可编辑
clearable: false, // 可清除
required: false, // 必填校验
dataType: '', // 数据类型校验
pattern: '', // 正则表达式校验
}
}
]
}
}
}
</script>