FcDesigner

Appearance

右侧配置字段映射规则 ​

右侧配置表单中 field 映射规则允许开发者自定义和扩展组件和表单配置项的显示方式。以下是如何使用这些规则来修改和映射组件及表单的配置项。

组件配置项 ​

在组件配置规则(props)方法中，如果 field 以 formCreate 开头，系统将自动修改规则中对应的字段。这使得开发者可以通过统一的方式来定义和映射组件的配置。

字段说明
type修改rule.props.type字段，"type"可以任意定义
options>label修改rule.props.options.label字段，"label"可以任意定义
formCreateStyle修改rule.style字段，"style"可以任意定义
formCreateStyle>width修改rule.style.width字段，"width"可以任意定义
formCreateChild修改rule.children[0]

1. 修改 rule.props.type 字段 ​

js
{
  props() {
    return [
      {
        type: 'select',
        field: 'type',
        title: '选择器',
        props: {
          options: [
            { label: '文本框', value: 'input' },
            { label: '单选框', value: 'radio' }
          ]
        }
      }
    ];
  }
}

解释： 此配置通过 type 字段映射，将选择的组件类型直接影响 rule.props.type 字段。

2. 修改 rule.props.options.label 字段 ​

js
{
  props() {
    return [
      {
        type: 'input',
        field: 'options>label',
        title: '标签文本',
        props: {
          placeholder: '请输入标签文本'
        }
      }
    ];
  }
}

解释： 使用 options>label 字段映射，可以动态修改 rule.props.options.label 的显示文本。

3. 修改 rule.style 字段 ​

js
{
  props() {
    return [
      {
        type: 'color',
        field: 'formCreateStyle',
        title: '背景颜色',
        props: {
          value: '#000000'
        }
      }
    ];
  }
}

解释： 此配置通过 formCreateStyle 字段映射，让用户选择组件的背景颜色。

4. 修改 rule.style.width 字段 ​

js
{
  props() {
    return [
      {
        type: 'input-number',
        field: 'formCreateStyle>width',
        title: '宽度设置',
        props: {
          min: 50,
          max: 500
        }
      }
    ];
  }
}

解释： 使用 formCreateStyle>width 字段映射，允许用户通过数值输入来设置组件的宽度。

5. 修改 rule.children[0] ​

js
{
  props() {
    return [
      {
        type: 'textarea',
        field: 'formCreateChild',
        title: '子元素文本',
        props: {
          rows: 4
        }
      }
    ];
  }
}

解释： 通过 formCreateChild 字段映射，可以直接对第一个子元素进行配置，如设置文本内容。

表单配置项 ​

表单配置中的 field 规则说明如何修改和映射表单的配置项。这些字段支持自定义配置，从而提供灵活的表单布局和功能扩展。

字段说明
size修改options.form.size字段，"size"可以任意定义
_submitBtn>show修改options._submitBtn.show字段，"show"可以任意定义
>globalEvent修改options.globalEvent字段，"globalEvent"可以任意定义
>form>size修改options.form.size字段，"form>size"可以任意定义

1. 修改 options.form.size 字段 ​

js
{
  type: 'select',
  field: 'size',
  title: '表单大小',
  options: [
    { label: '小', value: 'small' },
    { label: '中', value: 'medium' },
    { label: '大', value: 'large' }
  ]
}

解释： 使用 size 字段映射，开发者可以定义表单的整体尺寸选项。

2. 修改 options._submitBtn.show 字段 ​

js
{
  type: 'switch',
  field: '_submitBtn>show',
  title: '显示提交按钮',
  props: {
    checkedValue: true,
    unCheckedValue: false
  }
}

解释： 通过 _submitBtn>show 字段映射，此配置可以控制提交按钮的显示或隐藏。

3. 修改 options.globalEvent 字段 ​

js
{
  type: 'input',
  field: '>globalEvent',
  title: '全局事件名称',
  props: {
    placeholder: '请输入事件名称'
  }
}

解释： 使用 >globalEvent 字段映射，开发者可以设置用于捕获事件的全局事件名称。

4. 修改 options.form.size 字段（另一种表示） ​

js
{
  type: 'select',
  field: '>form>size',
  title: '表单尺寸',
  options: [
    { label: '小', value: 'small' },
    { label: '中', value: 'medium' },
    { label: '大', value: 'large' }
  ]
}

解释： 类似于前面提到的 size 字段，这里通过 >form>size 字段映射来设置表单的尺寸。

这些实例展示了如何利用设计器提供的字段映射规则，灵活地调整组件和表单的配置项。这不仅增强了界面的可配置性，也使得开发者的配置工作变得更加直观和高效。