vue实现qq邮箱的写信中收件人识别回车和；双击支持编辑，每个邮箱地址都有单独的背景色

实现这个功能，可以采用以下步骤：

1. 在vue中使用`<textarea>`标签实现收件人输入框，监听其`input`事件，获取输入框中的文本。
2. 使用正则表达式匹配文本中的每个邮箱地址，并将它们存储在数组中。
3. 在模板中使用`v-for`指令渲染出每个邮箱地址的tag，并为每个tag设置单独的背景色。
4. 监听每个tag的`dblclick`事件，将其转换为可编辑状态。
5. 监听每个tag的`blur`事件，将其转换为不可编辑状态，并更新对应的邮箱地址。

下面是一个简单的实现代码示例：

<template>
  <div>
    <textarea ref="input" v-model="text" @input="handleInput"></textarea>
    <div class="tags">
      <span v-for="(email, index) in emails" :key="index"
            :style="{ backgroundColor: colors[index % colors.length], cursor: 'pointer' }"
            @dblclick="editEmail(index)"
            :contenteditable="email.editable"
            @blur="updateEmail(index, $event.target.textContent)">
        {{ email.address }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
      emails: [],
      colors: ['#FFC107', '#2196F3', '#4CAF50', '#E91E63', '#9C27B0']
    }
  },
  methods: {
    handleInput() {
      const regex = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g;
      const matches = this.text.match(regex);
      if (matches) {
        this.emails = matches.map(address => ({ address, editable: false }));
      } else {
        this.emails = [];
      }
    },
    editEmail(index) {
      this.emails[index].editable = true;
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },
    updateEmail(index, address) {
      this.emails[index].address = address;
      this.emails[index].editable = false;
    }
  }
}
</script>

这里使用了一个正则表达式匹配文本中的邮箱地址，然后将匹配结果存储在`emails`数组中。在模板中，使用`v-for`指令渲染出每个邮箱地址的tag，并为每个tag设置单独的背景色。同时，监听每个tag的`dblclick`事件，将其转换为可编辑状态。在编辑完成后，监听tag的`blur`事件，将其转换为不可编辑状态，并更新对应的邮箱地址。