在 Vue.js 开发中，动态表单是非常常见的需求。而 vuejs-dynamic-fields 是一个可以帮助我们快速解决动态表单问题的 npm 包。
安装
首先，我们需要安装 vuejs-dynamic-fields。可以通过 npm 或 yarn 来进行安装：
npm install vuejs-dynamic-fields
或
yarn add vuejs-dynamic-fields
使用
安装完成后，我们需要在 Vue 组件中引入 vuejs-dynamic-fields：
import dynamicFields from 'vuejs-dynamic-fields';
export default {
components: {
dynamicFields
},
...
}然后我们在模板中使用 dynamicFields 组件进行渲染。
<dynamic-fields @add="addField" @remove="removeField" :fields="fields" :schema="schema"> <button slot="add-button">添加字段</button> </dynamic-fields>
这里我们需要传入一些属性，下面我们来逐一解释。
属性
fields：表单的初始值，必须是一个数组。schema：表单的结构，必须是一个对象。add-button：添加字段按钮的 slot，可以自定义添加字段的按钮。
事件
add：添加字段事件，在添加新的表单字段时触发，事件的参数为表单字段的值。remove：删除字段事件，在删除表单字段时触发，事件的参数为表单字段的索引。
schema
schema 是 vuejs-dynamic-fields 最为重要的属性，它定义了表单的结构，也决定了表单的外观。在 schema 中，我们需要定义表单的每一个字段的类型、名称、默认值和其他相关信息。
下面是一个 schema 的示例：
-- -------------------- ---- -------
-
----- -
----- -------
------ -----
------ ---
------------ -------
--
------- -
----- ---------
------ -----
------ -------
-------- -
- ------ ---- ------ ------ --
- ------ ---- ------ -------- -
-
--
-------- -
----- -----------
------ -----
------ ---
-------- -
- ------ ----- ------ --------- --
- ------ ----- ------ -------- --
- ------ ----- ------ ------ -
-
-
-在这个示例中，我们定义了三个表单字段，分别是 name、gender 和 hobbies。
这里需要注意的是，每一个字段都有四个属性：
type：字段的类型，可以是text、select或checkbox。label：字段的标签，用于展示在表单上。value：字段的初始值。options：只有在类型为select或checkbox时，才需要定义 options。
示例
下面我们来看一个具体的使用示例。
假设我们现在有一个需求，需要用户输入自己的个人信息，包括姓名、性别、出生年月、电话、爱好等。其中，姓名、性别和爱好可以输入多项，出生年月和电话只能输入一项。这时，我们可以使用 vuejs-dynamic-fields 来实现。
首先，我们需要定义一个动态表单的初始值 fields，包括一个对象数组，每一个对象代表一个表单项。
-- -------------------- ---- -------
------ -
------ -
------- -
-
----- ---
------- -------
--------- ---
------ --
-------- --
-
-
-
--接着，我们需要定义表单的结构 schema。
-- -------------------- ---- -------
------ -
------ -
------- -
----- -
----- -------
------ -----
------ ---
------------ -------
--
------- -
----- ---------
------ -----
------ -------
-------- -
- ------ ---- ------ ------ --
- ------ ---- ------ -------- -
-
--
--------- -
----- -------
------ -------
------ ---
------------ --------------------------
--
------ -
----- -------
------ -----
------ ---
------------ ---------
--
-------- -
----- -----------
------ -----
------ ---
-------- -
- ------ ----- ------ --------- --
- ------ ----- ------ -------- --
- ------ ----- ------ ------ -
-
--
-
-
-需要注意的是，出生年月和电话是不能输入多项的，因此它们的值是空字符串。爱好可以是多项，所以它的值是一个空数组。
接下来，我们需要定义两个函数来处理添加和删除表单项。
- 添加：
-- -------------------- ---- -------
-------- -
---------- -
------------------
----- ---
------- -------
--------- ---
------ ---
-------- --
--
-
-- 删除：
methods: {
removeField(index) {
this.fields.splice(index, 1)
}
}最后，我们将定义好的动态表单渲染出来：
<dynamic-fields @add="addField" @remove="removeField" :fields="fields" :schema="schema"> <button slot="add-button">添加字段</button> </dynamic-fields>
这样，我们就完成了一个简单的动态表单。
小结
本文介绍了如何使用 npm 包 vuejs-dynamic-fields 来实现动态表单，包括安装、使用和示例。希望本文能够对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff381e8991b448ddbe5