效果
输入字符，然后回车（enter）就会生成一个小块包裹字符，点击小块按回退（backspace）可以删除掉。
具体的效果可以参考：https://jwolfcn.github.io/vue-multi-items-input/
npm链接：https://www.npmjs.com/package/multi-items-input#installation
代码实现
1、版本："multi-items-input": "^0.1.4"
2、安装依赖
npm install --save multi-items-input
3、vue文件里引用组件
import 'multi-items-input' import 'multi-items-input/dist/multi-items-input.css'
separator为分隔，可以输入‘；’分离开小块
<multi-items-input v-model="ipsArr" placeholder="请输入ip" separator="" @select="selectHandle" @delete="deleteHandle" :selection-only="false" ></multi-items-input>
4、关于事件操作（输入以及删除）
// 这里返回的数据arr类似：[{id: null, name: '192.168.0.1'}] // obj就是类似{id: null, name: '192.168.0.1'} // ip控制 - 回车确定 selectHandle(arr, obj) { this.ips = arr }, // ip控制 - backspace确定 deleteHandle(obj, arr){ this.ips = arr },
5、数据回显
// 需要将数据转化为[{id: null, name: '192.168.0.1'}]格式 this.ipsArr = [{id: null, name: '192.168.0.1'}]
6、关于样式问题
举个例子：
/* 修改多输入框 */ .jw-container { margin-top: 0; background-color: #fff; border: 1px solid #C5C8CA; display: flex; flex-wrap: wrap; .jw__container { margin-top: 0; input { font-size: 16px;/*no*/ color: #606266; } } .point-container { margin: 2px 0 1px;/*no*/ .label { height: 24px;/*no*/ line-height: 24px;/*no*/ background:#F2F2F2; padding: 0 7px;/*no*/ } } }
