grd-project-test

API 设计

<JsonSchemaForm
  schema={schema}
  value={value}
  onChange={handleChange}
  locale={locale}
  contextRef={someRef}
  uiSchema={uiSchema}
/>

schema

json schema 对象，用来定义数据，同时也是我们定义表单的依据

value

表单的数据结果，你可以从外部改变这个 value，在表单被编辑的时候，会通过onChange透出 value

需要注意的是，因为 vue 使用的是可变数据，如果每次数据变化我们都去改变value的对象地址，那么会导致整个表单都需要重新渲染，这会导致性能降低。 从实践中来看，我们传入的对象，在内部修改其 field 的值基本不会有什么副作用，所以我们会使用这种方式来进行实现。也就是说，如果value是一个对象， 那么从JsonSchemaForm内部修改的值，并不会改变value对象本身。我们仍然会触发onChange，因为可能在表单变化之后，使用者需要进行一些操作。

onChange

在表单值有任何变化的时候会触发该回调方法，并把新的值进行返回

locale

语言，使用ajv-i18n指定错误信息使用的语言

contextRef

你需要传入一个 vue3 的Ref对象，我们会在这个对象上挂载doValidate方法，你可以通过

const yourRef = ref({})

onMounted(() => {
  yourRef.value.doValidate()
})

<JsonSchemaForm contextRef={yourRef} />

这样来主动让表单进行校验。

uiSchema

对表单的展现进行一些定制，其类型如下：

export interface VueJsonSchemaConfig {
  title?: string;
  descrription?: string;
  component?: string;
  additionProps?: {
    [key: string]: any;
  };
  withFormItem?: boolean;
  widget?: 'checkbox' | 'textarea' | 'select' | 'radio' | 'range' | string;
  items?: UISchema | UISchema[];
}
export interface UISchema extends VueJsonSchemaConfig {
  properties?: {
    [property: string]: UISchema;
  };
}

使用样例

HelloWorld.js

import { defineComponent, ref } from 'vue';
import SchemaForm, { ThemeProcess } from 'grd-project-test';
import theme from 'grd-project-test/dist/theme/index.common';
import demos from '../assets/demo';

export default defineComponent({
  name: 'HelloWorld',
  setup(props) {
    let demo = demos;
    let contextRef = ref();
    function handleOnChange(v) {
      demo.value = v;
      console.log('new value', v);
    }
    function doVerify() {
      console.log('1', contextRef.value.doValidate);
      contextRef.value.doValidate().then((res) => {
        console.log(res);
      });
    }
    console.log('json', contextRef);
    console.log('json1', contextRef.value);
    return () => {
      return (
        <div>
          <h1>{props.msg}</h1>
          <ThemeProcess theme={theme}>
            <SchemaForm
              schema={demo.schema}
              value={demo.default}
              onChange={handleOnChange}
              uiSchema={demo.uiSchema}
              contextRef={contextRef}
            />
          </ThemeProcess>
          <button onClick={doVerify}>校验</button>
        </div>
      );
    };
  }
});

demo.js

export default {
  name: 'Demo',
  schema: {
    type: 'object',
    properties: {
      pass1: {
        type: 'string',
        minLength: 10,
        test: true,
        title: 'password'
      },
      pass2: {
        type: 'string',
        minLength: 10,
        title: 're try password'
      }
    }
  },
  default: {
    pass1: '',
    pass2: ''
  },
  uiSchema: {
    properties: {
      pass1: {
        color: 'blue'
      },
      pass2: {
        color: 'red'
      }
    }
  }
};

注意事项

1. 最好使用 jsx 而不是 sfc
2. 即使用 sfc，要使用 setup 写法