vue 实现邮箱收件人功能！！！没想到下拉框完全可以做到

最新推荐文章于 2025-09-05 01:38:12 发布

原创最新推荐文章于 2025-09-05 01:38:12 发布 · 2.8k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Vue中创建一个动态的邮箱输入框，利用`el-select`组件结合远程搜索实现邮箱地址的自动补全，同时支持自定义创建。通过`v-model`双向绑定，`remote-method`进行远程过滤，并展示了一个简洁易懂的示例代码。

标签部分：

<el-select
            style="width: 100%" v-model="addMail.toEmail" multiple filterable allow-create default-first-option
            remote reserve-keyword :remote-method="remoteMethod" placeholder="请输入邮箱">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

data 部分：

data() {
  return {
    options: [],
    toEmail: [],
    addMail: {},
    contacts: [],
    suffix: ['@qq.com', '@163.com', '@gmail.com', '@126.com', '@yeah.net', '@vip.163.com', '@wo.cn', '@188.com', '@aliyun.com', '@vip.sina.com', '@sina.com','@sina.cn', '@sohu.com'],
  }
}

方法：

created() {
  this.getContacts()
},
methods: {
  getContacts() {
    list().then(response => {
      setTimeout(() => {
        this.loading = false;
        var listContacts = response.data.resultBody.records;
        for (let i = 0; i < listContacts.length; i++) {
          var contact = listContacts[i]
          var info = {'value':contact.email, 'label': contact.email}
          this.contacts.push(info)
        }
      })
    })
  },
  remoteMethod(query) {
    if (query != '') {
      if (query.indexOf('@') < 0) {
        this.options = []
        for (let i = 0; i < this.suffix.length; i++) {
          this.options.push({
            value: query + this.suffix[i],
            label: query + this.suffix[i]
          })
        }
      }
      var options = this.options.filter(item => {
        return item.label.toLowerCase()
          .indexOf(query.toLowerCase()) > -1;
      });
      this.options = options

      var contacts = this.contacts.filter(item => {
        return item.email.toLowerCase()
          .indexOf(query.toLowerCase()) > -1;
      });
      if (contacts.length > 0) {
        this.options.push(contacts)
      }
    } else {
      this.options = []
    }
  }
}

看一下最终的效果：