multi-items-input组件

一、需求

1. 邮箱的收件人等角色的邮箱账号或者账号，通过输入规定的字符串进行查询
2. 输入值变化就查询，查询到的进行下拉框展示
3. 选中后填入input，删除时直接删除一个邮箱账号或者账号

二、multi-items-input组件

1. 中文意思：多项目输入
2. npm网站：multi-items-input - npm
3. GitHub网站：GitHub - jwolfcn/vue-multi-items-input: 类似”qq邮箱收件人地址栏输入，自动补全收件人“，能退格删除整个item，纯键盘操作快捷完成多项选择或输入
4.  功能：类似”qq邮箱收件人地址栏输入，自动补全收件人“，能退格删除整个item，纯键盘操作快捷完成多项选择或输入
5. 应用的框架：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>