vue-multiple-input 是一个 Vue.js 组件，可以帮助快速构建多字段输入框的表单。它提供了一个带有 add 和 remove 操作的可重复输入框，支持自定义输入框数量、输入框类型和输入框可选项。本文将具体介绍如何安装、使用该组件。
安装
vue-multiple-input 可以通过 npm 安装，使用以下命令：
npm install vue-multiple-input
使用
引入
在你需要使用 vue-multiple-input 的组件中，需要通过 import 的方式引入：
import MultipleInput from 'vue-multiple-input'
注册
接着，在使用的组件中注册该组件：
export default {
components: {
MultipleInput
},
}基础使用
-- -------------------- ---- -------
----------
-----
---------------------------------
------
-----------
--------
------ ------------- ---- --------------------
------ ------- -
----------- -
-------------
-
-
---------上面的代码会在一个最简单的形式下渲染出一个添加按钮和一个空白的输入框。
可配置项
vue-multiple-input 支持多种可配置项。
fields
fields 可以控制所需要的输入框数量。默认情况下，该组件只有一个输入框。传入一个数组，即可创建所需的输入框。
<template>
<div>
<multiple-input :fields="[{}, {}]"></multiple-input>
</div>
</template>types
types 可以控制输入框的类型。默认情况下，类型为 "text"。传入一个数组，即可创建所有需要输入的输入框。
<template>
<div>
<multiple-input :types="['text', 'number']"></multiple-input>
</div>
</template>options
options 可以控制输入框的可选项。默认情况下，可选项为空数组。传入一个数组，即可创建所需的可选项列表。
<template>
<div>
<multiple-input :options="[['option1', 'option2'], ['option3', 'option4']]"></multiple-input>
</div>
</template>addLabel
addLabel 控制添加按钮的文本。默认情况下，按钮文本为 "Add"。
<template>
<div>
<multiple-input addLabel="自定义 add "></multiple-input>
</div>
</template>removeLabel
removeLabel 控制删除按钮的文本。默认情况下，按钮文本为 "Remove"。
<template>
<div>
<multiple-input removeLabel="自定义 remove"></multiple-input>
</div>
</template>示例代码
-- -------------------- ---- -------
----------
-----
---------------
----------- ------ --------- ------------- ----- -- - ------ -------------------- ------------- ----- ---
---------------- ---------
---------------------- ----------- ----------- ------------
------------- ------
------------------- ------
------------------
------
-----------
--------
------ ------------- ---- --------------------
------ ------- -
----------- -
-------------
--
-
---------上面的代码创建了两个带有下拉菜单的输入框，类型为文本和电子邮件，每个输入框都有一个预先配置的选项列表。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc581e8991b448dd29a