Skip to content
关注微信公众号,获取最新动态
官方QQ交流群:985558286

自定义字段

可以在设计器字段面板中配置引入自己的组件进行操作。

接下来我们将详细讲述下如何添加一个自定义字段到设计器中:

实现自定义组件

我们简单实现一个自定义组件:

CustomWidthHeight.vue
vue
<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{
  padding: 10px;

  span{
    +span{
      margin-left: 10px;
    }
  }
}
</style>

TIP

需要注意,自定义组件必须能够支持 v-model 进行双向绑定。

注册组件

js
Vue.use(FormMaking, {
  components: [{
    name: 'custom-width-height',
    component: CustomWidthHeight // 自定义组件
  }]
})

也可以使用 Vue.component 进行组件的注册。

设计器配置

vue
<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, // 数据绑定属性
            required: false, // 必填校验
            dataType: '', // 数据类型校验
            pattern: '', // 正则表达式校验
            validator: '', // 自定义校验
          }
        }
      ]
    }
  }
}
</script>

字段属性配置

自定义字段的属性配置分成了 自带属性传入属性扩展属性自定义属性,下面来详细说明下:

自带属性

js
options: {
  defaultValue: '', // 默认值
  customClass: '', // 自定义样式
  labelWidth: 100, // 标签宽度
  isLabelWidth: false, // 是否展示标签
  hidden: false, // 隐藏属性
  dataBind: true, // 数据绑定属性
  required: false, // 必填校验
  dataType: '', // 数据类型校验
  pattern: '', // 正则表达式校验
  validator: '', // 自定义校验
}

这些属性不需要自己在组件内部处理,只需要在设计器配置的时候添加对应的参数即可。

传入属性

js
options: {
  width: 100, // 宽度
  height: 100, // 高度
  placeholder: '', // 占位符
  readonly: false, // 只读
  disabled: false, // 禁用
  editable: false, // 可编辑
  clearable: false, // 可清除
  printRead: false, // 阅读模式
}

这些属性可以直接在设计器配置的时候进行设定,但是需要你自己的组件支持这些属性,通过 props 传入。

查看示例

我们来对 custom-width-height 组件进行一些改进,来具体看下如何配置:

vue
<template>
  <div class="custom-component" :style="{
    width,
    height
  }">
    <span>
      宽:<el-input v-model="dataModel.width" :disabled="disabled" style="width: 200px;"></el-input>
    </span>
    <span>
      高:<el-input v-model="dataModel.height" :disabled="disabled" style="width: 200px;"></el-input>
    </span>
  </div>
</template>

js
props: {
  value: {
    type: Object,
    default: () => ({})
  },
  width: { 
    type: String, 
    default: ''
  }, 
  height: { 
    type: String, 
    default: ''
  }, 
  disabled: { 
    type: Boolean, 
    default: false
  } 
}

我们为自定义的组件 custom-width-height 添加了width height disabled三个 prop,并且在组件内部进行了使用,接下来只需要在设计器中引入即可,如下:

vue
<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: 0,
            isLabelWidth: false,
            hidden: false,
            dataBind: true,
            width: '', 
            height: '', 
            disabled: false
          }
        }
      ]
    }
  }
}
</script>

扩展属性

自定义的组件除了支持以上两种属性外,另外可以根据组件的情况扩展属性进行配置。

js
options: {
  extendProps: {} // 扩展属性,组件的扩展Props配置
}
查看示例

我们为 custom-width-height 组件添加一个 tip的属性,该属性不在自带和传入属性中:

vue
<template>
  <div class="custom-component" :style="{
    width,
    height
  }">
    <span>
      宽:<el-input v-model="dataModel.width" :disabled="disabled" style="width: 200px;"></el-input>
    </span>
    <span>
      高:<el-input v-model="dataModel.height" :disabled="disabled" style="width: 200px;"></el-input>
    </span>
    <div>{{tip}}</div>
  </div>
</template>

js
props: {
  tip: { 
    type: String, 
    default: ''
  } 
}

在设计器中添加 extendProps的配置如下:

vue
<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: 0,
            isLabelWidth: false,
            hidden: false,
            dataBind: true,
            width: '',
            height: '',
            disabled: false,
            extendProps: {} 
          }
        }
      ]
    }
  }
}
</script>

字段属性面板-扩展属性配置设置框中进行配置:

自定义属性

TIP

自定义属性和扩展属性功能类似,都是为字段扩展组件的配置,不同之处在于,扩展属性需要配置json数据,而自定义属性对用户配置更加友好,通过界面可视化操作配置。

在设计器中添加 customProps 配置:

vue
<template>
  <fm-making-form
    :custom-fields="customFields"
    >
    <template #widgetconfig="{type, data, customProps}">
      <el-form-item v-if="type === 'custom' && data.el=== 'custom-width-height'" label="Tip">
        <el-input v-model="customProps.tip"></el-input>
      </el-form-item>
    </template>
  </fm-making-form>
</template>

<script>
  export default {
    data() {
      return {
        customFields: [
          {
            name: '自定义组件',
            el: 'custom-width-height',
            options: {
              // ...
              customProps: {} // 自定义字段属性
            }
          }
        ]
      }
    }
  }
</script>

通过字段属性面板可操作属性:

字段事件配置

内置事件

表单设计器为自定义字段内置了 onChange事件,直接在 custom-fields 中配置即可。

vue
<fm-making-form
  :custom-fields="[
    {
      name: '自定义组件',
      el: 'custom-width-height',
      options: {
        // ...
      },
      events: { 
        onChange: '' // 在此处配置事件名称即可
      } 
    }
  ]"      
>
</fm-making-form>

非内置事件

除了内置的表单事件外,其他的事件皆可以通过 $emit 传递给设计器,然后在custom-fields配置事件名称即可。

js
// CustomWidthHeight.vue
this.$emit('on-test') 
vue
<fm-making-form
  :custom-fields="[
    {
      name: '自定义组件',
      el: 'custom-width-height',
      options: {
        // ...
      },
      events: {
        'on-test': '' // 在此处配置事件名称即可
      }
    }
  ]"      
>
</fm-making-form>
查看效果

自定义图标

可以通过如下配置来为自定义字段添加自定义的图标。

vue
<fm-making-form
  :custom-fields="[
    {
      name: '自定义组件',
      el: 'custom-width-height',
      icon: '<svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z"></path></svg>', 
      options: {
        // ...
      },
    }
  ]"      
>
</fm-making-form>

除了使用Svg,还可以直接使用<img>标签:

icon: '<img src="..." />'