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文件时需要在开发环境下运行，因为静态文件只能在开发服务器中访问。