vue el-select 实现邮件系统收件人效果

简介

开发邮箱项目时，需要实现类似qq邮箱收件人的效果，其中包含：可添加多个收件人，输入时匹配通讯录，输入框失去焦点时自动添加输入的内容等功能。

根据需求项目，使用element的el-select插件，该插件已包含多选，输入匹配功能，但默认功能输入数据后，只有按Enter键时，才会自动添加，不符合需求，所以，本文完善下相关功能。

vue版本：2.6.12

不是专业前端的，如果有些描述存在问题，自行理解哈

代码及解析

先贴下完整代码，该代码作为components使用的，示例：

<email-select :address-list="addressBookList" @changeValue="changeRecipientsTos" :email="recipientsTos" placeholder="请添加收件人"></email-select>

 参数解析

address-list        通讯录列表，格式：[{name: "昵称", email: "xxx@xx.xx"}]
@changeValue        同步输入框收件人列表信息的方法，注意哦，这个方法更新的list，不能是参数email的值哦
email                初始显示的收件人列表
placeholder          输入框输入提示

全部代码 

<template>
  <div style="width: 100%">
    <el-select @blur.native.capture="selectBlur" style="width: 100%" v-model="list"
               filterable
               multiple
               allow-create
               remote
               :remote-method="remoteMethod"
               default-first-option
               :placeholder="placeholder">
      <el-option
        v-for="item in options"
        :key="item.email"
        :label="isNotNull(item.name) ? item.name + '<' + item.email + '>' : item.email"
        :value="item.email">
      </el-option>
    </el-select>
  </div>
</template>
<script>
import {isNotNull} from "@/api/default";

export default {
  name: "email-select",
  props:{
    email: {
      type: Array,
    },
    placeholder: {
      type: String
    },
    addressList: {
      type: Array
    }
  },
  data(){
    return {
      list: [],
      options: [],
      addressBookList: [],
    }
  },
  watch: {
    "addressList": {
      handler(newvalue, oldValue){
        this.addressBookList = newvalue;
      }
    },
    "list": {
      handler(newvalue, oldValue){
        this.$emit("changeValue", newvalue);
      }
    },
  },
  created() {
    this.list = this.email;
    this.addressBookList = this.addressList;
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        setTimeout(() => {
          this.options = this.addressBookList.filter(item => {
            return item.email.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    selectBlur(e){
      let val = e.target.value;
      console.info("selectBlur:" + val);
      let that = this;
      let length = this.list.length;
      setTimeout(function (){
        let timeLength = that.list.length;
        if (length < timeLength){
          return;
        }
        if (isNotNull(val) && !that.list.includes(val)){
          that.list.push(val)
        }
      }, 200);
    }
  }

}
</script>

 方法：isNotNull，只是判断是否为空的方法而已。

/**
 ** 判断是否为空
 * @param val
 * @returns {boolean}
 */
export function isNotNull(val){
  if (val == undefined || val == "" || val == null){
    return false;
  } else {
    return true;
  }
}

相关问题解析：

 el-select触发失去焦点事件，需要使用@blur.native.capture触发，只有@blur不行，非搞前端的，其中的原因没去详细了解。

selectBlur方法中，使用了setTimeout，是因为匹配到通讯录中的地址时，如果点击通讯录的地址，依然会触发失去焦点的事件，而获取到的值是输入的地址，而不是点击的通讯录地址。

所以，等待0.2秒，判断下list的值是否增加：

如果点击通讯录中的地址，list会增加一条记录，点击其他地方，list值不会增加。

即

如果list的值增加了，就忽略掉输入框中的值，

如果list没有增加，就添加输入框中的值。

其他的，应该是vue比较基础的，或者element有文档的，就不过多解释了

经过测试，符合项目需求，感觉还行，就记录一下，顺便分享一下