一、需求
- 邮箱的收件人等角色的邮箱账号或者账号,通过输入规定的字符串进行查询
- 输入值变化就查询,查询到的进行下拉框展示
- 选中后填入input,删除时直接删除一个邮箱账号或者账号
二、multi-items-input组件
- 中文意思:多项目输入
- npm网站:multi-items-input - npm
- GitHub网站:GitHub - jwolfcn/vue-multi-items-input: 类似”qq邮箱收件人地址栏输入,自动补全收件人“,能退格删除整个item,纯键盘操作快捷完成多项选择或输入
- 功能:类似”qq邮箱收件人地址栏输入,自动补全收件人“,能退格删除整个item,纯键盘操作快捷完成多项选择或输入
- 应用的框架:Vue
三、使用组件
1、安装组件
npm install --save multi-items-input
引入组件
import 'multi-items-input'
import 'multi-items-input/dist/multi-items-input.css'
使用组件的标签
<multi-items-input
:fetch="search"
placeholder="placeholder"
:height="100"
separator=";"
@select="select"
@delete="onDelete"
:selection-only="false"
></multi-items-input>
2、组件API
Property | Type | Default | 描述 |
v-model | Array | 绑定值。其中的每个对象都应该像{name: 'xx', id: xx} | |
placeholder | String | 输入的占位符。 | |
separator | String | 项目之间的分隔符。 | |
height | Number | 100 | 容器的高度。 |
fetch | Function(queryStr, done) | 触发请求建议。关键字将作为第一个参数传递。第二个参数是通知请求完成的回调函数。 | |
trigger-on-focus | Boolean | true | 是否在焦点上触发获取功能。 |
selection-only | Boolean | false | 用户是否应从建议中进行选择。 |
zIndexOfPopper | Number | - | 设置 popper 的 z-index。 |
disabled | Boolean | false | 设置输入可编辑 |
事件
event | Parameters | 描述 |
delete | Object, Array | 第一个参数是删除的项目。其次是所选项目的数组。 |
select | Array, Object | 第一个参数是所选项目的数组。其次是添加的项目。 |
代码
<template>
<div>
<div>111</div><input type="text">
<div class="content">
<span>收件人:</span>
<multi-items-input
class="multi-items"
:fetch="search"
v-model="nameId"
placeholder="请输入收件人账号"
:height="32"
separator=";"
@select="selectHandle"
@delete="deleteHandle"
:selection-only="true"
></multi-items-input>
</div>
</div>
</template>
<script>
import "multi-items-input";
import "multi-items-input/dist/multi-items-input.css";
export default {
name: "ElementView",
data() {
return {
nameId: [],
};
},
watch: {},
methods: {
// enter确认执行的事件
selectHandle(arr, obj) {
console.log(arr, obj);
console.log(this.nameId, 111);
},
// delete删除执行的事件
deleteHandle(obj, arr) {
console.log(obj, arr);
console.log(this.nameId, 222);
},
// 每次input里面的数据变化执行的事件(执行的是最后一个;分隔的字符串变化)
search(queryStr, done) {
console.log(queryStr, done);
console.log(this.nameId, 333);
},
},
};
</script>
<style lang="scss">
.content {
display: flex;
.multi-items {
height: 42px !important;
width: 800px !important;
}
.jw-container .pre-input[data-v-db4c1888] {
margin-top: 0 !important;
}
.jwolfcn-container {
width: 750px;
}
.jw-container[data-v-db4c1888] {
background-color: #fff;
}
.jw-container .pre-input[data-v-db4c1888] input {
border: 1px solid black !important;
margin-top: 0px !important;
height: 35px !important;
margin-left: 5px !important;
border-radius: 5px;
}
.jw-container .pre-input[data-v-db4c1888] input:hover {
border: 1px solid red !important;
}
.jw-container .pre-input[data-v-db4c1888] input:focus {
border: 1px solid green !important;
}
}
</style>