简介

Vue JSONS chema Form是一个基于 Vue/Vue3，Json Schema 和 ElementUi/antd/iview3/naiveUi 等生成 HTML Form 表单，用于活动编辑器、h5 编辑器、cms 等数据配置的 vue 组件,支持可视化生成表单 Schema。

体验

Playground 演示
Vue 可视化活动编辑器
可视化表单 Schema 生成器

解决方案

使用对应 UI 框架的 Vjsf 时,各版本 api 和使用形式 99%一致，仅有如下差异：

vue3 emit 事件都会去掉 on 前缀。

vue3 antd Vue v-model 不使用 modelValue props，这里需要做个转换，

例如 a-input 组件，ant vue3 需要使用 v-model:value，但在整个框架内部 v-model 都是使用 modelValue，所以这里就需要对不一致的 props 通过中间组件组做转换。

你可以自行转换，也可以使用内置方法 modelValueComponent 转换，如下：

1
2
3
4
5
6
7
8
9
10
11
// 返回一个接受 modelValue 和 update:modelValue v-model的组件
import { modelValueComponent } from '@lljj/vue3-form-ant';
const MyFixInputComponent = modelValueComponent('a-input', {
    model: 'value' // 这里要根据ant组件 model的参数传递
});

// naive 也是类似操作
import { modelValueComponent } from '@lljj/vue3-form-naive';
const MyFixInputComponent = modelValueComponent('n-input', {
    model: 'value' // 这里要根据naive组件 model的参数传递
});

为了适配 Naive，提供了@lljj/vue3-form-naive 版本，
但这只在全局引入 navieui 的前提下才会生效。
如果项目中采用的是按需引入的方式（由于支持 Tree Shaking，大多都是安装官方指引按需引入），
会导致无法通过 @lljj/vue3-form-core 适配 NaiveUi 库。
此时可以进行如下配置来解决此问题，直接放全部示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<template>
  <component :is="curVueForm" ref="schemaForm" v-model="formData" :schema="schema"> </component>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, getCurrentInstance, h } from 'vue';
let installedNaive = false;
const VueNaiveForm = defineAsyncComponent(async () => {
  // eslint-disable-next-line no-unused-vars
  const [naive, antForm] = await Promise.all([import('./index.js'), import('@lljj/vue3-form-naive')]);

  return {
    name: 'naiveFormWrap',
    setup(props, { attrs, slots }) {
      // hack动态install naive
      if (!installedNaive) {
        const instance = getCurrentInstance();
        instance.appContext.app.use(naive.default);
        installedNaive = true;
      }

      return () =>
        h(
          antForm.default,
          {
            ...attrs
          },
          slots
        );
    }
  };
});
const curVueForm = VueNaiveForm;
const formData = {};
const schema = {
  type: 'object',
  required: ['userName', 'age'],
  properties: {
    userName: {
      type: 'string',
      title: '用户名',
      default: 'Liu.Jun'
    },
    age: {
      type: 'number',
      title: '年龄'
    },
    bio: {
      type: 'string',
      title: '签名',
      minLength: 10,
      default: '知道的越多、就知道的越少',
      'ui:options': {
        placeholder: '请输入你的签名',
        type: 'textarea',
        rows: 1
      }
    }
  }
};
</script>

<style scoped></style>

同目录下 index.js 文件如下：

1
2
3
4
5
6
7
import NaiveUI from 'naive-ui';

export default {
  install(app) {
    app.use(NaiveUI);
  }
};