代码拉取完成,页面将自动刷新
将 json 数据渲染成界面的 vue 组件库,是根据 vjform 动态表单、jformer 动态表单 以及vjdesign 设计器 相关项目开发的 vue3 版本
详细参考说明文档
此项目安装依赖
npm install
npm run dev
或
yarn install
yarn run dev
使用 npm 安装
npm i @json2render/vue-full
实现一个简单示例
main.js
import { createApp } from 'vue'
import App from './App.vue'
import JRender from '@json2render/vue-full'
createApp(App).use(JRender).mount('#app')
App.vue
<template>
<div>
<v-jrender v-model="model" :fields="fields" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
return {
model: { text1: 'Hello world!!' },
fields: [
{ component: 'p', text: '$:model.text1' },
{ component: 'input', value: 'model.text1' },
],
}
},
})
</script>
示例 1: 简单示例
示例 2: Element 组件
一般的定义形式如下
<v-jrender
v-model="model"
:fields="fields"
:datasource="datasource"
:listeners="listeners"
@setup="onsetup"
/>
组件定义包括 component
props
children
三个基本属性
组件定义会被转换成代理对象,组件属性值如果是符合特定的表达式则在运行时会被转换成真实逻辑
在组件被渲染之前会触发传渲染钩子行为,可在渲染之前改变组件的属性,有两个钩子执行的时机
数据源就是数据的来源,可在组件属性表达式里使用的数据,默认支持 model
scope
arguments
refs
这几种数据来源
除了以上几种数据源外,还支持自定义数据源
支持扩展组件属性代理行为、渲染钩子、数据源,实现自定义渲染规则
说明文档 完善中...
因为基于 vue2.0 的组件如果不做特殊适配基本上不能在 vue3.0 使用因此不能兼容,但是如果组件库 vue2.0 的属性和 vue3.0 的属性一致,则可以使用自定义渲染钩子将组件属性转换成适用于 vue3.0 的定义实现兼容
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型