Vue.js 是一个流行的前端框架，能够帮助开发者快速构建交互式用户界面。而当我们需要制作表单时，Vue.js 应该是不二之选。但是，不同的表单类型都需要不同的处理方式，花费很多时间制作没有必要的表单是一个大问题。这时使用 vue-form-generator-mnm npm 包可以大大节省开发时间。
vue-form-generator-mnm 是一个基于 vue 可以生成表单的 npm 包，具有灵活性，可扩展性。它能够根据不同的表单类型生成相应的表单组件，只需要通过简单的配置文件即可快速生成您需要的表单。
安装 vue-form-generator-mnm
vue-form-generator-mnm 可以通过 npm 安装，在终端输入以下命令即可：
npm install vue-form-generator-mnm
使用 vue-form-generator-mnm
在 HTML 的元素中, 设置一个 div 占位符：
<div id="form"></div>
接下来, 在 JavaScript 中创建一个新的 Vue 实例，使用 Vue.use 加载 vue-form-generator-mnm：
import Vue from 'vue' import VueFormGeneratorMNM from 'vue-form-generator-mnm' Vue.use(VueFormGeneratorMNM)
现在，我们就可以使用 vue-form-generator-mnm 创建表单了：
-- -------------------- ---- -------
--- -----
--- --------
----- -
------- -
------- -
-
----- --------
---------- -------
------ -----
------ -------
------------ -------
--
-
----- --------
---------- --------
------ -----
------ --------
------------ --------
----- -------------
-
-
--
------------ -
------------------ ------
--------------------- ----
-
-
--在上述代码中，我们定义了一个包含两个字段的表单。一个是文字类型的输入框，另一个是 email 类型的输入框。
配置 schema
schema 定义了表单的结构。一个字段有以下属性：
type：字段类型，可选的字段有input、textarea、select、checkbox、radio、button、submit、reset、number、hidden、passwordinputType(可选):输入类型,比如在input类型下,可选的值有text, email等。label(必须)：字段的标签model(必须)：字段对应的数据的属性名placeholder(可选)：在输入框内有输入内容时，输入框上方的提示文本hint(可选):在字段下方显示帮助文本。
fields 集合包含表单中的所有字段。可以使用以下示例：
{
fields: [
...
]
}配置 formOptions
formOptions 是配置表单选项的对象。
validateBeforeSubmit:提交表单时是否执行验证。
Each field object in the fields array can contains separate validation rules.
submitButtonFormatter:submit按钮的HTML方法.
submitButtonClasses: submit按钮的CSS类.
validateAfterLoad:true当组件呈现时立即验证表单.
addErrorToParent:true: 如果输入出现问题，则输入字段的父级元素添加类 has-error.
addErrorToInputGroup:true: 如果输入出现问题，则输入字段的同级元素添加类 has-error-group.
displayErrors:false: 显示错误消息.
语言本地化：
-- -------------------- ---- -------
------------ -
----- -
----- ----------
------ ----------------
--------- --------------
-------------- --- ----- --- --------
-------------- --- ------ -- -- ----- --- ---------
-
-$emit methods:
the form component also $emit some events that you can use to extend the component.
this.$emit("onChange", val); // trigger when form change
this.$emit("onValidationError", errors); //trigger when form validation fails
this.$emit("onFormSend", data); //trigger when form send如果要为表单添加自定义事件，请遵循以下格式：
-- -------------------- ---- -------
-------- -
--------- -------- ------- ------ -
-- ------ ----
-- ------ ---
-------------- --- --------------- -
------------------------- ------
-
-- ------
-----------------------
-
-示例代码
以下是使用 vue-form-generator-mnm 创建的简单表单：
-- -------------------- ---- -------
----------
---- ----------
----- -------------------------------
-----------
----------------------- ---------------- --------------------------- -------------- --
------- -------------------------
-------
------
-----------
--------
------ ------------------- ---- -------------------------
------ ------- -
----- ----------------
------------
------------------------- -------------------
--
---- -- -
------ -
------- -
------- -
-
----- --------
---------- -------
------ -----
------ -------
------------ -------
--
-
----- --------
---------- --------
------ -----
------ --------
------------ --------
----- -------------
--
-
----- --------
---------- -----------
------ -----
------ -----------
------------ -------
-
-
--
------------ -
------------------ ------
--------------------- ----
-
-
--
-------- -
-------- ------- -
-- -- ----- ----
----- ---- - --------------------
-- ------
------------------- -- -
-- ----------
-- ------- -
------------------- ------------
-
---
-----------------------
-
-
-
---------上述代码创建一个包含姓名、邮箱和密码字段的表单。您可以通过更改 schema 中 fields 对象中的属性来定制表单。为了使用合适的 formOptions，可以在构造函数中调整相应的参数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601c81e8991b448de468