Vue JSON form
通过 JSON 呈现任何组件与定义脚本的实现
使用任何 Vue 组件或 html 元素构建视图
开发 vue 项目时，可能会遇到以下需求场景
- 界面以及交互行为需要通过配置动态呈现
- 定义的配置需要进行存储和读取
- 配置需要通过可视化界面进行编辑
普通 JSON 数据虽然可以描述对象的属性与结构，但是对象方法的定义、程序逻辑的实现以及对象属性与数据的关联关系在序列化成 JSON 数据后无法保存，即使将这些定义可以单独序列化成二进制或 base64 格式的数据，但是如果需要开发编辑器编辑配置时，序列化后的数据对象也不好操作。
使用 Vue JSON form 组件可以解决 JSON 格式的这些弊端，组件支持用特定 JSON 对象表示属性值和方法，最终在运行时解析属性转换成真正的值或方法。
现已推出支持 vue3.0 版本
Getting Start
克隆项目，执行
npm install之后
npm start特性
- 使用 JSON 格式呈现界面和交互行为
- 支持任何 Vue 组件或 html 元素
- 支持数据和组件的关联关系以及联动操作
- 对数据进行验证
- 可视化界面设计器
- 支持二次开发
特色功能
说明
转换支持将固定参数 params、表单数据 model、数据源 datasource、数组元素 scope、函数参数 arguments、组件引用 refs 这些数据关联到组件元素属性上实现值的联动
支持绑定值、计算属性、数组、事件定义，将以上数据关联到对象属性上
数据源数据支持远程数据获取、刷新和进行表单提交行为（最新版已经支持对象数据源的数据使用转换结果）
通过监听（watchs）实现数据变化时更新关联数据，实现联动
名词解释
-
固定参数（params）: 指那些从表单组件外部传递过来的初始数据，这些数据只能由表单外部操作，在表单内不会有方法改变其属性值
-
表单数据（model）: 指那些关联了表单组件的值属性，该对象里的属性会随着表单组件的操作交互产生变化也会被监听定义的赋值操作改变，可理解为输出的数据对象
-
数据源（datasource）: 一方面是指表单内部的固定数据（对象或数组）、通过 http 或 websocket（将来支持）请求后的结果数据 也存在只有交互行为没有返回结果的数据源，例如：html 表单提交
-
数组元素（scope）: 当绑定或计算属性的结果作为值作用到一个循环呈现的元素时，在子元素里 scope 作为每一项的数据，作为执行绑定值或计算属性参数
-
函数参数（arguments）: 由于计算属性和事件定义最终转换结果是函数，因此函数 arguments 对象可作为下一级绑定或计算属性的输入
-
组件引用（refs） 指组件的实例，在组件
fieldOptions中定义ref属性后，可通过refs获取组件的实例并使用组件中的方法作为另一个组件的事件处理程序
文档
待更新...
指南
通过 npm 安装
npm i vjform项目中引用
import Vue from 'vue'
import vjform from 'vjform'
Vue.component('vjform', vjform)基础示例
呈现一个简单的表单
template
<template>
<vjform v-model="model" :fields="fields"></vjform>
</template>script
export default {
data() {
return {
// 数据 model
model: {},
// Vue 组件或 html 元素组成的数组
fields: [
{
component: "input",
// 通过定义 model，显示并响应输入的结果
model: ["firstName"],
// 参考 Vue 关于 render 的 API [Vue's render functions](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)
fieldOptions: {
class: ["form-control"]
attrs: {
placeholder: "输入文本"
}
}
}
]
};
}
};转换示例
通过 bind 转换实现将某个值绑定到某个对象的属性上，在值变化时属性值也会保持一致
支持 bind func array on 转换，具体先看 App.vue 里的示例
<template>
<vjform v-model="model" :fields="fields"></vjform>
</template>script
export default {
data() {
return {
// 数据 model
model: {},
// Vue 组件或 html 元素组成的数组
fields: [
{
component: "input",
model: ["firstName"],
// 参考 Vue 关于 render 的 API [Vue's render functions](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)
fieldOptions: {
class: ["form-control"]
attrs: {
placeholder: "输入文本"
}
}
},
{
component: 'p',
fieldOptions: {
domProps: {
// 定义一个转换, 显示 model 的 firstName 属性
innerText: {
$type: 'bind',
$source: 'model.firstName'
}
}
}
},
{
component: 'p',
// 支持特定属性的简易定义，这里同定义 innerText 效果一样
text: {
$type: 'bind',
$source: 'model.firstName'
}
}
]
};
}
};版本 2.0.0 重大更新
变更扩展功能的注入方式
使用 use 方法对当前项目全局注册功能
import vjform from 'vjform'
import * as bind from './transform/bind'
import fieldOptions from './provider/fieldOptions'
import requestSource from './datasource/request'
import addition from './functional/addition'
vjform.use(
({
datasource, // 数据源
transform, // 转换
provider, // 渲染处理
functional // 功能函数
}) => {
transform(bind.getter, bind.deal)
provider(fieldOptions)
datasource('request', requestSource)
functional('addition', addition)
}
)可在使用时单独注入扩展功能
组件增加 initialling 方法，可单独对组件使用扩展
<template>
<v-jform
:fields="fields"
v-model="model"
:params="params"
:datasource="datasource"
:components="components"
:listeners="listeners"
:initialling="onInitialling"
></v-jform>
</template>
<script>
export default {
data() {
return {
fields: [],
listeners: [],
model: {},
params: {},
datasource: {},
components: {}
}
},
methods: {
onInitialling({
datasource, // 数据源
transform, // 转换
provider, // 渲染处理
functional // 功能函数
}) {
// 同全局 use
}
}
}
</script>在转换中使用的对象支持使用另一个组件的实例
内置的网络请求数据源改用 fetch 实现
可视化设计器
vjdesign 是 vjform 的可视化设计器
也可访问 gitee 项目
依赖
Lodash
使用了 get set forEach 等 API
mitt
从转换或渲染处理中想要改变 model 的值采用发布订阅机制由外层容器组件负责统一更新，分离核心功能值更新对 vue2 的依赖，以便于将来支持 vue3 或 react
Vue
基于 v2.5.9 测试，理论上支持高于 v2.4.0 版本