@7span/vue-form 中文文档教程

Question

vue-form

从 JSON 生成动态表单。

？？？ 这是正在进行的工作。 不建议在生产中使用。

Installation

npm install @7span/vue-form

---

✨ Usage

<v-form ref="vForm" v-model="values" :config="form.config" :fields="form.fields"></v-form>

---

⚙️ Props

1. config

Config 定义了如何处理表单。 配置选项如下

Option	Default	Possible Values	What is does
defaults	{}		Default configuration for the fields.
endpoint	null	Valid URL	An endpoint to process data for CRUD

2. fields

一个包含表单字段配置对象的数组。 对象的 key 将作为字段的 name 添加。 每个对象都可以有以下选项。

Option	Default	Possible Values	What is does
interface	input	input,choice,select,file,textarea	Renders input elements. choice will render either radio or checkbox. Know more.
type	text	text,email,radio,checkbox etc.	Based on input, the type can be diffrent. I.e. the input can have email,text,url etc.
label	Camel cased value of key	String	The label of the field
placeholder	null	String	The placeholder. Will be added where supported.
value	null	String, Array	The default value to set whilte rendering form. If repeater is set, provide an array of values.
hide	false	Boolean	If the field is hidden.
choices	[]	Array	Options for radio,checkbox & select. Know more.
messages	null	Object	Know more.
design	{}	Object	Know more.
repeater	null	Object	If allow to add multiple values to field. Know more.
before	null	String	Value to prepend in Field Group
after	null	String	Value to append in Field Group
fields	null	Object	If interface is set to group, you can provide fields under this which follows same structure as fields prop. This is recursive.

interfaces

添加到现场配置中的可能接口列表。

Name	Types	Desc
input	text,email,url,[any valid input type]
choice	radio, checkbox
select	NA
file	NA
textarea	NA
group	NA	You can group fields under one with this. This will recursively create form fields.

choices

Choices 是具有以下键的对象数组。

Option	Default	Possible Values	What it does
label	null	String	The display text.
value	null	String ,Number	The value.

messages

该对象包含要显示的不同消息以进行验证和帮助文本。

Option	Default	Possible Values	What it does
desc	null	String	A helper message to show below field.
invalid	null	String	A warning message to show when field validation fails.
valid	null	String	A success message to show when field validation is truthy.

design

Option	Default	Possible Values	What it does
col	12	Number from 1-12	How many cols to occupy in grid.
grid		Number	When rendering field choices in radio/checkbox, how many items should be displayed in single row

repeater

Option	Default	Possible Values	What it does
max	null	Number	Maximum values to allowed to add.
min	null	Number	Minimum values required.

---

Events

1. change

更改事件将以下值公开为一个对象。

key	Type	What it contains
changed	Array	An array of changed values. It will only contain multiple values if the fields are grouped. Know more
values	Object	All the values in current state.
valuesObj	Object	All the values with metadata in current state.

changed

changed 对象包含以下键。

• action : What action taken which triggered the change event. Possible values are:
  • input: When the field value is updated.
  • child-input: In a case of grouped fields, if the child value is updated, the parent action will be this.
  • repeater-add: When a new repeater field is added.
  • repeater-remove: When a new repeater field is removed.
• field: Name of the field.
• value: Value of the field.
• valueObj: Value of the field with metadata.
• index: If the field is repeater one, the index of affected repeater item.

---

Slots

• form--start
• form--end
• field--before--{field-name}
• field--before--{field-name}--{index}
• field--after--{field-name}
• field--after--{field-name}--{index}
• field--start--{field-name}
• field--start--{field-name}--${index}
• field--end--{field-name}
• field--end--{field-name}--${index}
• repeater--add
• repeater--remove

---

⚔️ Methods

1. setValue

您可以通过调用此函数直接从您的组件设置值。

this.$refs.vForm.setValue({
  field: "e_company", 
  value: "7Span Tech",
  index: 1 // Required only if you want to set value at specific index in repeater fields.
});

2. setConfig

您可以通过调用此函数从您的组件修改配置。

this.$refs.vForm.setConfig({
  field: "e_company", 
  key:"after", // The configuration key as provided in fields
  value: "#", // The value of the configuration.
  index: 1 // Required only if you want to set value at specific index in repeater fields.
});