Vue3实现自定义vue-json-schema-form组件

<template>
  <div>
    <h2>{{ formTitle }}</h2>
    <vue-form-renderer :schema="formSchema" @submit-success="onSubmitSuccess" />
  </div>
</template>
 
<script>
import { ref } from 'vue';
import VueFormRenderer from 'vue-form-renderer';
import 'vue-form-renderer/lib/vue-form-renderer.css';
 
export default {
  components: {
    VueFormRenderer
  },
  setup() {
    const formTitle = ref('用户注册');
    const formSchema = ref({
      type: 'object',
      properties: {
        username: {
          type: 'string',
          title: '用户名'
        },
        email: {
          type: 'string',
          title: '邮箱',
          format: 'email'
        },
        password: {
          type: 'string',
          title: '密码',
          'ui:widget': 'password'
        }
      },
      required: ['username', 'email', 'password']
    });
 
    const onSubmitSuccess = (formData, emit) => {
      console.log('提交的数据:', formData);
      // 这里可以实现提交数据到后端的逻辑
      // ...
    };
 
    return {
      formTitle,
      formSchema,
      onSubmitSuccess
    };
  }
};
</script>

这个代码实例展示了如何在Vue 3应用中引入和使用vue-form-renderer组件来渲染一个简单的JSON模式表单。它定义了一个包含用户名、邮箱和密码字段的表单，并且在用户提交表单时通过onSubmitSuccess处理函数输出表单数据。这个例子简单明了地展示了如何使用Vue 3和vue-form-renderer创建动态表单。