String

String 类型可以有多种表现形式，比如基础的字符串Input类型，或者RichText这样的富文本格式，下面我们会详细介绍Vue3 form render 所涵盖的一些 UI 格式：

Input

{
  "title": "简单输入框",
  "type": "string"
}

textarea

通过指定format参数，可以设置 string 类型的 UI 表现形式。当设置 "format": "textarea" 后即可展示 textarea :

{
  "title": "简单输入框",
  "type": "string",
  "format": "textarea"
}

url

url 支持链接测试，以及基本的链接格式校验。 通过指定format参数，可以设置 string 类型的 UI 表现形式。当设置 "format": "url" 后即可展示 url :

{
  "title": "URL",
  "type": "string",
  "format": "url"
}

email

email 支持基本的邮箱格式校验， 通过指定format参数，可以设置 string 类型的 UI 表现形式。当设置 "format": "email" 后即可展示 email :

{
  "title": "邮箱",
  "type": "string",
  "format": "email"
}

color

color 支持基本的颜色格式校验， 通过指定format参数，可以设置 string 类型的 UI 表现形式。当设置 "format": "color" 后即可展示 color :

{
  "title": "颜色选择",
  "type": "string",
  "format": "color"
}

datePicker

通过指定format参数，可以设置 string 类型的 UI 表现形式。当设置 "format": "date" 后即可展示 datePicker :

{
  "title": "日期选择",
  "type": "string",
  "format": "date",
  "ui:options": {
    "placeholder": "请选择日期",
    "show-time": true,
    "format": "YYYY/MM/DD HH:mm:ss",
    "type": "DatePicker"
  }
}

如果要自定义datePicker的一些其他属性，可以通过ui:options选项来设置，详细的属性可以参考Antd DatePicker (opens new window)

image

image 支持上传图片以及图片预览， 通过指定format参数，可以设置 string 类型的 UI 表现形式。当设置 "format": "image" 后即可展示 image :

{
  "title": "图片展示",
  "type": "string",
  "format": "image"
}

select

通过指定format参数，可以设置 string 类型的 UI 表现形式。当设置 "format": "select" 后即可展示 select :

{
  "title": "单选",
  "type": "string",
  "enum": [
    "a",
    "b",
    "c"
  ],
  "enumNames": [
    "选项1",
    "选项2",
    "选项3"
  ]
}

richText

通过指定format参数，可以设置 string 类型的 UI 表现形式。当设置 "format": "richText" 后即可展示 select :

{
  "title": "富文本编辑器",
  "type": "string",
  "format": "richText"
}