表单化渲染器

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

安装

依赖蓝鲸bk-magic-vue 2.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';

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": {
                        "props": {
                          "type": "email"
                        }
                      }
                  },
                  "uri": {
                      "title": "Uri",
                      "type": "string",
                      "format": "uri",
                      "ui:component": {
                        "props": {
                          "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": {
                        "props": {
                          "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": {
                "props": {
                  "disabled": true
                }
              }
          },
          "readonly": {
              "type": "string",
              "title": "A readonly field",
              "default": "I am read-only.",
              "ui:component": {
                "props": {
                  "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>