Skip to content

Commit

Permalink
1.1.0 (#3)
Browse files Browse the repository at this point in the history
* 支持局部引用组件,不局限于element-ui,可使用自定义

* modify package.json

* know how to exactly publish this module...

* update readme to record how to publish this module to npm

* Hotfix attr type (#2)

* fix 使用component时,去掉$type不报错

* 修改属性验证提示语

* 添加updateForm用于批量更新表单数据

* 更新README中文说明

* 更新 README 图片地址

* 默认使用中文文档

* fix README 文档跳转的问题

* 1.1.0

* update updateForm comment

* update radio-group comment
  • Loading branch information
Alvin-Liu authored and levy9527 committed Dec 12, 2018
1 parent b3ca63d commit a14238f
Show file tree
Hide file tree
Showing 14 changed files with 529 additions and 184 deletions.
141 changes: 141 additions & 0 deletions README.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
# el-form-renderer

Form renderer is based on [element-ui](https://github.com/ElemeFE/element). It inherits all of the element's attribute definitions completely and extends them briefly. So users can render a complete element form by using a piece of preset data.

- [Demo](https://leezng.github.io/el-form-renderer/)
- [中文文档](./README.md)

## Quick start

```html
// Step1: Make sure you have properly installed element-ui and used it correctly.

// Step2: Install
yarn add el-form-renderer

// Step3: In the .vue file that needs the renderer
<template>
<el-form-renderer :content="content"></el-form-renderer>
</template>

<script>
import ElFormRenderer from 'el-form-renderer'
export default {
components: {
ElFormRenderer
}
}
</script>
```

## Props

* Support all attributes on [el-form](http://element.eleme.io/#/en-US/component/form).

* `disabled` [Boolean] Set `true` to disable all atomic forms. If the `element-ui` version is still below `2.1.0`, it is still compatible.

* `content` [ObjectArray] Define the contents of the form, each `Object` represents an atomic form (such as `el-input, el-select, ...`), All attributes on the `el-form-item` are declared here, and attributes on the `el-input` etc. are declared on the `$el` attribute. There are other attributes on the Object such as: `$id, $type, $default,$enableWhen[optional], $options[optional], $attrs[optional]`.

```js
// content example
[
{
$id: "form1", // Each atomic form uses an id to store its value, be careful not to repeat
$type: "input", // Type, all the form types provided by element, like el-xxx
$enableWhen: { form2: 'beijing' }, // Optional attribute, which means that the this atomic form will display when form2's value is beijing
$attrs: { 'data-name': 'form1' }, // Optional attribute, wording follows the Render function specification of Vue
label: "Input", // A property on the el-form-item
$default: "default value",
rules: [{ required: true, message: 'Please enter the name of the activity name', trigger: 'blur' }] // A property on the el-form-item
}, {
$id: "form2",
$type: "select",
label: "Select",
// $el: Used to define the properties of a specific atomic form (el-select in this case)
$el: {
placeholder: "Please select your zone"
},
// $options: Each atomic form with Selection Capabilities use this to define options. (such as: select, radio-group, radio-button, checkbox-group, checkbox-button, etc.)
$options: [{
label: 'Zone one',
value: 'shanghai'
}, {
label: 'Zone two',
value: 'beijing'
}]
}
]
```

In addition, we added an optional value to the `$type` attribute: `group`, which can be used to create more complex data types:

```js
// This example will get the object data structure:
// group1: {
// input1: '',
// input2: ''
// }
{
$id: "group1", // Follow the principle of the same level of ID is not repeated, essentially equivalent to the object's key
$type: "group",
label: "object data example",
$items: [{
$id: "input1",
$type: "input",
label: "input1",
   $default: "default value"
}, {
$id: "input2",
$type: "input",
label: "input2",
   $default: "default value",
}]
}
```

## Methods

* Supports all methods on [el-form](http://element.eleme.io/#/en-US/component/form).

* Other Methods:

| Method Name | Description | Parameters |
| ---------- | -------- | ---------- |
| getFormValue | Get the value of the current form | - |
| updateValue | Update form value manually | ({ id, value }) |

## Slot

* You can insert a custom `VNode` at the end of the form by using the default `slot`.

## dev

install dependency

```sh
yarn

yarn add element-ui
```

run dev server

```sh
yarn dev
```

publish to npm

```sh
// remove element-ui in package.json
git checkout -- .

npm version

yarn dist

cd dist

npm publish --access public
```
Loading

0 comments on commit a14238f

Please sign in to comment.