vue-form-render + vue3

使用

官网

<template><a href="https://muwoo.github.io/vue-form-render">vue-form-render</a><div class="container"><formRender:schema="schema":formData="formData"@on-change="change"@on-validate="validate" /></div>
</template><script setup>
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";const state = reactive({schema: {type: "object",properties: {inputStr1: {title: "input输入框1:",type: "string",maxLength: 4,"ui:options": {placeholder: "enter less than 4 characters",},},inputStr2: {title: "input输入框2:",type: "string",maxLength: 4,"ui:options": {placeholder: "enter less than 4 characters",},},textareaStr: {title: "简单输入框",type: "string",format: "textarea",},},},formData: {inputStr1: "1",inputStr2: "2",textareaStr: "3",},
});
let { schema, formData } = toRefs(state);
const change = (v) => {state.formData = v;console.log("change执行", v);
};
const validate = (v) => {console.log("validate执行", v);
};
</script><style scoped>
.container {text-align: left;width: 300px;
}
</style>

JSON Schema

JSON Schema
JSON Schema是基于JSON的格式的规范，用于定义JSON数据的结构。它是根据2011年到期的IETF草案撰写的.JSON Schema

描述您现有的数据格式。
清晰，人性化和机器可读的文档。
完整的结构验证，对自动化测试很有用。
完成结构验证，验证客户提交的数据。

vue 项目读取本地json文件数据

1.创建一个json文件，比如data.json，并保存在项目目录下的static文件夹里
data.json

{"type": "object","properties": {"AllString": {"title": "string类","type": "object","properties": {"input": {"title": "简单输入框","type": "string","ui:options": {"placeholder": "昵称"}},"textarea": {"title": "简单文本编辑框","type": "string","format": "textarea"},"color": {"title": "颜色选择","type": "string","format": "color"},"date": {"title": "日期选择","type": "string","format": "date"},"image": {"title": "图片展示","type": "string","format": "image"}}},"allNumber": {"title": "number类","type": "object","properties": {"number1": {"title": "数字输入框","description": "1 - 1000","type": "number","min": 1,"max": 1000},"number2": {"title": "带滑动条","type": "number","ui:widget": "slider"}}},"allBoolean": {"title": "boolean类","type": "object","properties": {"radio": {"title": "是否通过","type": "boolean"},"switch": {"title": "开关控制","type": "boolean","ui:widget": "switch"}}},"allRange": {"title": "range类","type": "object","properties": {"dateRange": {"title": "日期范围","type": "range","format": "dateTime","ui:options": {"placeholder": ["开始时间", "结束时间"]}}}},"allEnum": {"title": "选择类","type": "object","properties": {"select": {"title": "单选","type": "string","enum": ["a", "b", "c"],"enumNames": ["早", "中", "晚"]},"radio": {"title": "单选","type": "string","enum": ["a", "b", "c"],"enumNames": ["早", "中", "晚"],"ui:widget": "radio"},"multiSelect": {"title": "多选","description": "下拉多选","type": "array","items": {"type": "string"},"enum": ["A", "B", "C", "D"],"enumNames": ["杭州", "武汉", "湖州", "贵阳"],"ui:widget": "multiSelect"},"boxes": {"title": "多选","description": "checkbox","type": "array","items": {"type": "string"},"enum": ["A", "B", "C", "D"],"enumNames": ["杭州", "武汉", "湖州", "贵阳"]}}},"obj1": {"title": "可折叠对象","description": "这是个对象类型","type": "object","ui:options": {"collapsed": true},"properties": {"input1": {"title": "输入框1","type": "string"},"input2": {"title": "输入框2","type": "string"}}},"listName2": {"title": "对象数组","description": "对象数组嵌套功能","type": "array","minItems": 1,"maxItems": 3,"ui:displayType": "row","items": {"type": "object","properties": {"input1": {"title": "简单输入框","type": "string","ui:hidden": "{{rootValue.selet1 !== 'b'}}"},"selet1": {"title": "单选","type": "string","enum": ["a", "b", "c"],"enumNames": ["早", "中", "晚"]}}}}},"required": []
}

2.在Vue组件中引入json文件，例如：

<script>
import data from '@/static/data.json'
export default {data() {return {jsonData: data}}
}
</script>

3.在模板中使用json数据：

<template><div><p v-for="item in jsonData">{{ item }}</p></div>
</template>

注意：读取本地json文件时需要在开发环境下运行，因为静态文件只能在开发服务器中访问。