noir-form-render
v0.2.1
Published
<p align="center"> <img width=350 align= "center" alt="logo" src="https://user-images.githubusercontent.com/21073039/104408849-ef6d2280-559f-11eb-93e4-fed00748e4b6.png" /> </p> <h1 align= "center">vue3-form-render</h1> 基于Vue3.x,使用JSON Schema快速生成自定义
Downloads
17
Readme
install
npm i vue3-form-render --save
vue3 form render
depend on Ant Design of Vue
to render from items.so before we use vue3 form render
we need to install Ant Design of Vue
and import it to our project:
import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
const app = createApp(App);
app.use(Antd);
app.mount('#app');
easy demo
<template>
<div>
<formRender
:schema="schema"
:formData="formData"
@on-change="change"
@on-validate="validate"
/>
</div>
</template>
<script>
import {reactive, toRefs} from 'vue';
// render index
import FormRender from 'vue3-form-render';
// form render style
import 'vue3-form-render/lib/vue3-form-render.css';
export default {
name: 'App',
setup() {
const state = reactive({
schema: {
type: 'object',
properties: {
string: {
title: 'string',
type: 'string',
maxLength: 4,
'ui:options': {
placeholder: 'enter more than 4 characters',
},
}
},
},
formData: {
string: 'aaa'
},
});
const change = (v) => {
state.formData = v;
console.log(v);
}
const validate = (v) => {
console.log(v);
}
return {
...toRefs(state),
change,
validate,
}
},
components: {
FormRender,
}
}
</script>
Documentation
For extensive documentation see the examples folder or read it on vue3-form-render
API
Props
| Property | Description | Type | Default| | ---- | ---- | ---- | ---- | | schame | JSON Schema | object | -- | | formData | formData | object | -- |
Events
| Events Name | Description | Arguments | | ---- | ---- | ---- | | on-change | Callback function for user to trigger form update | function(value: formData) | | on-validate | Validation callback function for user to trigger form update | function(value: validates) |
Special thanks
this Project inspiration from form-render but There is no similar framework for Vue 3.x
License
This project is licensed under the MIT License - see the LICENSE.md file for details.