form-render/demo/json/demo.json

{
  "name": "FpDemo",
  "propsSchema": {
    "type": "object",
    "properties": {
      "inputDemo": {
        "title": "长度",
        "type": "string",
        "pattern": "^[A-Za-z0-9]+$",
        "message": {
          "pattern": "请输入正确格式"
        }
      },
      "numberDemo": {
        "title": "数字",
        "description": "数字输入框",
        "type": "number",
        "min": 10,
        "max": 100,
        "step": 10
      },
      "textareaDemo": {
        "title": "输入框",
        "type": "string"
      },

      "imgDemo": {
        "title": "图片",
        "type": "string",
        "format": "image",
        "default": "https://img.alicdn.com/tfs/TB1P8p2uQyWBuNjy0FpXXassXXa-750-1334.png"
      },
      "uploadDemo": {
        "title": "文件上传",
        "type": "string",
        "default": "https://img.alicdn.com/tfs/TB1P8p2uQyWBuNjy0FpXXassXXa-750-1334.png"
      },
      "disabledDemo": {
        "title": "不可用",
        "type": "string",
        "default": "我是一个被 disabled 的值"
      },
      "enumDemo": {
        "title": "枚举",
        "type": "string",
        "enum": ["A", "B"],
        "enumNames": [
          "养成",
          "<span style='background-color: black;display: inline-block;vertical-align: text-top;width: 48px;height: 24px;margin-top:-2px;color:white; border: 1px solid #ddd;'>试试</span>"
        ]
      },
      "dateDemo": {
        "title": "时间",
        "format": "dateTime",
        "type": "string"
      },
      "objDemo": {
        "title": "单个对象",
        "description": "这是一个对象类型",
        "type": "object",
        "properties": {
          "isLike": {
            "title": "是否显示颜色选择",
            "type": "boolean",
            "default": true
          },
          "background": {
            "title": "颜色选择",
            "description": "特殊面板",
            "format": "color",
            "type": "string"
          },
          "wayToTravel": {
            "title": "旅行方式",
            "type": "string",
            "enum": ["self", "group"],
            "enumNames": ["自驾", "跟团"]
          },
          "canDrive": {
            "title": "是否拥有驾照",
            "type": "boolean",
            "default": false
          }
        },
        "required": ["background"]
      },
      "multiSelectDemo": {
        "title": "多选组件",
        "description": "多选功能",
        "type": "array",
        "items": {
          "type": "string"
        },
        "enum": ["A", "B", "C", "D"],
        "enumNames": ["杭州", "武汉", "湖州", "贵阳"]
      },
      "custom": {
        "properties": {
          "payType": {
            "title": "支付方式",
            "description": "",
            "type": "array",
            "items": { "type": "string" },
            "enum": ["1", "5", "6"],
            "enumNames": ["预付", "面付", "信用住"]
          }
        },
        "type": "object",
        "required": ["payType"],
        "title": "酒店行业限制",
        "name": "custom"
      },
      "arrDemo": {
        "title": "对象数组",
        "description": "对象数组嵌套功能",
        "type": "array",
        "minItems": 1,
        "maxItems": 3,
        "items": {
          "type": "object",
          "properties": {
            "name": {
              "title": "字符名称",
              "description": "string类型",
              "type": "string",
              "pattern": "^[A-Za-z0-9]+$"
            },
            "num": {
              "title": "数字参数",
              "description": "number类型",
              "type": "number"
            }
          }
        }
      }
    },
    "required": ["textareaDemo", "dateDemo", "multiSelectDemo"]
  },
  "uiSchema": {
    "inputDemo": {
      "ui:className": "input-with-px",
      "ui:options": {
        "addonAfter": "px"
      }
    },
    "textareaDemo": {
      "ui:widget": "textarea",
      "ui:button": {
        "text": "测试",
        "icon": "",
        "callback": "clg"
      }
    },
    "disabledDemo": {
      "ui:disabled": true
    },
    "enumDemo": {
      "ui:width": "50%"
    },
    "dateDemo": {
      "ui:widget": "date",
      "ui:width": "50%"
    },
    "uploadDemo": {
      "ui:widget": "upload",
      "ui:action": "https://www.mocky.io/v2/5cc8019d300000980a055e76"
    },
    "arrDemo": {
      "ui:options": {
        "foldable": true
      },
      "items": {
        "name": {
          "ui:hidden": "num==3"
        }
      },
      "ui:extraButtons": [
        {
          "text": "复制",
          "icon": "copy",
          "callback": "copyLast"
        }
      ]
    },
    "objDemo": {
      "background": {
        "ui:dependShow": "'{{objDemo.isLike}}' == 'true'",
        "ui:widget": "color"
      },
      "wayToTravel": {
        "ui:widget": "radio"
      },
      "canDrive": {
        "ui:hidden": "wayToTravel!='self'"
      }
    },
    "multiSelectDemo": {
      "ui:widget": "multiSelect"
    }
  },
  "formData": {
    "inputDemo": "750",
    "textareaDemo": "FormRender\nHello World!",
    "imgDemo": "https://img.alicdn.com/tfs/TB1P8p2uQyWBuNjy0FpXXassXXa-750-1334.png",
    "enumDemo": "A",
    "dateDemo": "2018-11-22",
    "isLike": true,
    "objDemo": {
      "isLike": true,
      "background": "#ffff00"
    },
    "multiSelectDemo": ["C", "D"],
    "arrDemo": [
      {
        "name": "表单渲染",
        "num": 10
      },
      {}
    ]
  }
}