@blueking/bkui-form v1.0.0-beta.6

表单化渲染器

基于 bk-magic-vue 2.0组件库和JSON Schema协议的表单渲染器

安装

• 0.0.x 版本 依赖蓝鲸bk-magic-vue 2.0组件库，需要项目自己安装
• 1.x.x 版本 依赖蓝鲸bkui-vue 3.0组件库

npm i @blueking/bkui-form

使用

<template>
  <BkSchemaForm
    v-model="formData"
    ref="BkSchemaForm"
    :schema="schema"
    :layout="layout"
    :rules="rules"
    :form-type="formType"
    :context="context">
  </BkSchemaForm>
</template>
<script>
import createForm from '@blueking/bkui-form';
import '@blueking/bkui-form/dist/bkui-form.css';// vue3版本可以去掉这个，会自动引入

const BkSchemaForm = createForm();

export default {
  name: 'Playground',
  components: { BkSchemaForm },
  data() {
    return {
      schema: {
        "title": "Widgets",
        "type": "object",
        "properties": {
          "stringFormats": {
              "type": "object",
              "title": "String formats",
              "required": [
                  "email",
                  "uri"
              ],
              "properties": {
                  "email": {
                      "title": "Email",
                      "type": "string",
                      "format": "email",
                      "ui:component": {
                        "type": "email"
                      }
                  },
                  "uri": {
                      "title": "Uri",
                      "type": "string",
                      "format": "uri",
                      "ui:component": {
                        "type": "url"
                      }
                  }
              }
          },
          "boolean": {
              "type": "object",
              "title": "Boolean field",
              "properties": {
                  "default": {
                      "type": "boolean",
                      "title": "checkbox (default)",
                      "description": "This is the checkbox-description"
                  },
                  "radio": {
                      "type": "boolean",
                      "title": "radio buttons",
                      "default": "false",
                      "description": "This is the radio-description",
                      "ui:component": {
                        "name": "radio"
                      }
                  }
              }
          },
          "string": {
              "type": "object",
              "title": "String field",
              "properties": {
                  "default": {
                      "type": "string",
                      "title": "text input (default)"
                  },
                  "textarea": {
                      "type": "string",
                      "title": "textarea",
                      "ui:component": {
                        "type": "textarea",
                        "rows": 4
                      }
                  },
                  "integer": {
                      "type": "integer",
                      "title": "integer",
                      "default": 100086
                  },
                  "color": {
                      "type": "string",
                      "title": "color picker",
                      "format": "color",
                      "default": "#151ce6",
                      "ui:component": {
                        "name": "color"
                      }
                  }
              }
          },
          "disabled": {
              "type": "string",
              "title": "A disabled field",
              "default": "I am disabled.",
              "ui:component": {
                "disabled": true
              }
          },
          "readonly": {
              "type": "string",
              "title": "A readonly field",
              "default": "I am read-only.",
              "ui:component": {
                "readonly": true
              }
          },
          "widgetOptions": {
              "title": "widgetOptions",
              "type": "string",
              "default": "I am yellow",
              "ui:component": {
                "class": {
                  "bk-xxx": true
                },
                "style": {
                  "boxShadow": "0 0 6px 2px yellow"
                }
              }
          },
          "selectWidgetOptions": {
              "title": "selectWidgetOptions",
              "type": "string",
              "enum": [
                  "foo",
                  "bar"
              ]
          }
        }
      },
      layout: [],
      formData: {},
      formType: 'vertical',
      rules: {},
      context: {
        baseURL: '',
      }
    };
  },
  methods: {
    async validateBkForm() {
      const valid = this.$refs.BkSchemaForm.validateForm();
      console.log(valid)
    },
    validateBkFormItem() {
      this.$refs.BkSchemaForm.validateFormItem('stringFormats');
    },
  },
};
</script>

迁移

0.0.x 版本的schema中的ui:components下的props属性需要放到上一层级

0.0.x版本schema 写法

{
  "uri": {
    "title": "Uri",
    "type": "string",
    "format": "uri",
    "ui:component": {
      "props": {
        "type": "url"
      }
    }
  }
}

1.0.x 以上版本schema 写法

{
  "uri": {
    "title": "Uri",
    "type": "string",
    "format": "uri",
    "ui:component": {
      "type": "url"
    }
  }
}