Vue Json Design

# 快速开始

# NPM 安装

npm i vjdesign
1

# 使用设计器

引用 vjdesign

import Vue from 'vue'
import vjdesign from 'vjdesign'

Vue.use(vjdesign)
1
2
3
4

vue 中使用

<template>
  <v-jdesign v-model="value"></v-jdesign>
</template>

<script>
export default {
  data() {
    return { value: {} }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11

# 使用配置文件

设计器的 v-model 属性输出了动态表单的配置，jformer 组件可直接使用配置呈现界面和功能

另一个项目中用 npm 安装 jformer

npm i jformer
1

引用 jformer

import Vue from 'vue'
import jformer from 'jformer'

Vue.use(jformer)
1
2
3
4

使用 jformer 呈现界面

<template>
  <j-former v-model="value" :options="options" :params="args"></j-former>
</template>

<script>
export default {
  data() {
    return {
      value: {},
      options: { fields: [], datasource: {}, listeners: [] } // 设计器输出的配置
    }
  },
  computed: {
    args() {
      return this.$route.params // 可将路由参数或 querystring 作为额外参数传给表单
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意

设计器和动态表单是依赖 vue 项目本身支持的组件名来呈现元素，因此设计器和动态表单项目至少要保证引用同样的组件

例如：

  1. 设计器项目中 Vue.use(ElementUI) 那么使用配置的项目也要 Vue.use(ElementUI)

  2. 设计器里引用的额外组件 <v-jdesign components="components"></v-jdesign>，使用配置的项目也需要引用 <j-former components="components"></j-former> (设计时用到的组件除外，例如给设计器用的某个单独开发的属性编辑器)

# 使用 vjform 呈现界面

vjform 是设计器的基础依赖，只提供基础功能，如果想使用 vjform 呈现界面则需要安装扩展库

npm i jpresent-transform-design jpresent-transform-expression jpresent-vue-extends
1

引用依赖

import Vue from 'vue'
import vjform from 'vjform'
import design from 'jpresent-transform-design'
import expression from 'jpresent-transform-expression'

vjform.use(design)
vjform.use(expression)

Vue.use(vjform)
1
2
3
4
5
6
7
8
9

使用 vjform 呈现界面

<template>
  <v-jform
    v-model="value"
    :fields="options.fields"
    :datasource="options.datasource"
    :listeners="options.listeners"
    :params="args"
  ></v-jform>
</template>

<script>
export default {
  data() {
    return {
      value: {},
      options: { fields: [], datasource: {}, listeners: [] } // 设计器输出的配置
    }
  },
  computed: {
    args() {
      return this.$route.params //可将路由参数或 querystring 作为额外参数传给表单
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

扩展库说明

库名 说明
jpresent-transform-design 设计器设置的属性值转换成真实属性值
jpresent-transform-expression 属性值表达式支持
jpresent-vue-extends scopedSlot 支持

← 设计思想 →