nfeng-form v1.1.3

nfeng-form

用简单的json配置书写组件逻辑，既想满足业务需求之余，还想提升开发效率

Quick Start

In node.js

1.install

npm i nfeng-form --save

2.import

import Vue from 'vue'
import nfForm from 'nfeng-form'

Vue.use(nfForm)

3.usage

<template>
  <div>
    <nf-form
      :form-schema="formSchema"
      @onSubmit="onSubmit"
    ></nf-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formSchema: {
        properties: {
          name: {
            type: 'string'
          }
        }
      }
    }
  },
  methods: {
    onSubmit (values) {
      console.log(values)
    }
  }
}
</script>

nf:表达式

通过nf表达式，你可以通过{{$root.xxx}}取得指定字段的值，然后用原生的JS书写你的任意逻辑表达式

• 指定对象中的属性值，例子：

disabled: 'nf: {{$root.name.length}} > 2'

nfeng-schema

扁平的json结构，基本都在一级对象配置，部分字段支持nf:表达式

字段配置：properties

全局配置：properties

demo:

{
  properties: {
    <filed name>: {
      value: '', // 字段值
      label: '', // 标签内容
      widget: '', // 渲染组件名
      hidden: false, // 是否隐藏【支持dx表达式】
      itemLabelField: 'label',
      itemValueField: 'value',
      // 远程数据源
      remoteUrl: '', // 如果是远程访问，则填写该url
      otherParams: {}, // 其它请求的参数，支持字符串表达式
      rules: []
    }
  },
  globalConfig: {
    formCls: '' // 添加到 form 的样式
  }
}

Schema Generator

to do ...