0.0.42-beta.15 • Published 8 months ago

@blueking/bkui-form v0.0.42-beta.15

Weekly downloads
-
License
ISC
Repository
-
Last release
8 months ago

表单化渲染器

基于 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>
0.0.42-beta.15

8 months ago

0.0.42-beta.14

8 months ago

0.0.42-beta.13

8 months ago

0.0.42-beta.12

9 months ago

0.0.42

1 year ago

0.0.42-beta.10

10 months ago

0.0.42-beta.11

10 months ago

0.0.42-beta.2

1 year ago

0.0.42-beta.1

1 year ago

0.0.42-beta.8

11 months ago

0.0.42-beta.7

12 months ago

0.0.42-beta.9

10 months ago

0.0.42-beta.4

1 year ago

0.0.42-beta.3

1 year ago

0.0.42-beta.6

12 months ago

0.0.42-beta.5

12 months ago

1.0.0-beta.6

1 year ago

1.0.0-beta.5

1 year ago

1.0.0-beta.4

1 year ago

1.0.0-beta.3

1 year ago

1.0.0-beta.2

1 year ago

1.0.0-beta.1

1 year ago

0.0.40

2 years ago

0.0.41

2 years ago

0.0.37

2 years ago

0.0.38

2 years ago

0.0.39

2 years ago

0.0.32

2 years ago

0.0.33

2 years ago

0.0.34

2 years ago

0.0.35

2 years ago

0.0.36

2 years ago

0.0.41-beta.1

2 years ago

0.0.30

2 years ago

0.0.31

2 years ago

0.0.28

2 years ago

0.0.29

2 years ago

0.0.24

2 years ago

0.0.25

2 years ago

0.0.26

2 years ago

0.0.27

2 years ago

0.0.23

2 years ago

0.0.20

3 years ago

0.0.21

3 years ago

0.0.22

3 years ago

0.0.19

3 years ago

0.0.17

3 years ago

0.0.18

3 years ago

0.0.16

3 years ago

0.0.15

3 years ago

0.0.14

3 years ago

0.0.13

3 years ago

0.0.12

3 years ago

0.0.11

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago