# nfeng-form

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

Latest version **1.1.3** (published 2020-07-08) · 0 weekly downloads

## Install

```sh
npm install nfeng-form
pnpm add nfeng-form
yarn add nfeng-form
bun add nfeng-form
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2020-07-08 |
| First published | 2020-07-01 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 894.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | nfeng |

## Links

- npm: https://www.npmjs.com/package/nfeng-form
- npm.io page: https://npm.io/package/nfeng-form

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5

## Recent versions

- 1.1.3 (latest) — 2020-07-08
- 1.1.2 — 2020-07-08
- 1.1.1 — 2020-07-03
- 1.1.0 — 2020-07-01

## README

# 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

Option | Description | Default Value
---- | ---- | ----
value | 字段值
label | 标签内容
widget | 渲染组件名
rules | 验证规则
disabled | 是否禁用【支持nf表达式】 | false
itemLabelField | 枚举列表 显示 读取的字段 | 'label'
itemValueField | 枚举列表 值 读取的字段 | 'value'
remoteUrl | 枚举请求的地址
otherParams | 枚举请求的参数【支持nf表达式】
description | 描述信息

### 全局配置：properties

Option | Description | Default Value
---- | ---- | ----
formCls | 添加到 form 的样式

#### 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 ...

---
_Source: https://npm.io/package/nfeng-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._