vue-form-render + vue3

最新推荐文章于 2024-09-13 22:22:45 发布

ToOTOooo

最新推荐文章于 2024-09-13 22:22:45 发布

阅读量966

点赞数 9

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44792224/article/details/135601225

本文介绍了如何在Vue项目中使用`vue-form-render`库，通过JSONSchema定义表单结构，实现在页面上动态渲染输入控件，并处理onChange和onValidate事件。示例展示了如何从本地json文件加载数据配置表单结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用

官网

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