vue里利用multi-items-input组件实现QQ邮箱收件人输入框功能？

原创

凯小默的博客 2022-08-18 09:05:59 博主文章分类：Vue 技术栈 ©著作权

文章标签 vue 数据输入框代码实现 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者凯小默的博客的原创作品，请联系作者获取转载授权，否则将追究法律责任

效果

输入字符，然后回车（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

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,) {
    this.ips = arr
},
// ip控制 - backspace确定
deleteHandle(obj,){
    this.ips = arr
},

5、数据回显

// 需要将数据转化为[{id: null, name: '192.168.0.1'}]格式
this.ipsArr = [{id: null, name: '192.168.0.1'}]

6、关于样式问题

举个例子：

vue里利用multi-items-input组件实现QQ邮箱收件人输入框功能？_vue

/* 修改多输入框 */
.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*/
        }
    }
}