vue 实现input type="textarea" 输入这个域名如果输入完成回车则这个域名会有黄色背景；域名后面有个叉号可以删除域名， 双击支持编辑域名 可以输入多个域名，每个域名后面都有叉号和这个域名的背景色，不是整个背景颜色都变哦

你可以使用 Vue 组件来实现这个需求。首先，你需要定义一个组件来表示每个域名的输入框，可以使用 `v-model` 指令来双向绑定输入框的值。当输入完成后，你可以监听 `keyup.enter` 事件来判断用户是否按下了回车键。如果是，你可以将该域名的背景色设置为黄色。

当用户双击一个域名时，你可以使用 `@dblclick` 事件来监听这个双击事件，并将该输入框的 `readonly` 属性设置为 `false`，这样用户就可以编辑该域名了。

每个域名后面的叉号可以使用一个组件来实现，当用户点击该叉号时，你可以从域名列表中移除该域名。

最后，为了实现每个域名的背景色不同，你可以在组件内部定义一个计算属性，该计算属性返回一个随机的颜色值，并将该颜色应用到该域名的背景色中。

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

<template>
  <div>
    <div v-for="(domain, index) in domains" :key="index" :style="{ backgroundColor: domain.color }">
      <input type="text" v-model="domain.name" @keyup.enter="onDomainEnter(domain)">
      <close-button @click="onDomainDelete(domain)"></close-button>
    </div>
  </div>
</template>

<script>
import CloseButton from './CloseButton.vue';

export default {
  components: {
    CloseButton,
  },
  data() {
    return {
      domains: [],
    };
  },
  methods: {
    onDomainEnter(domain) {
      domain.color = this.getRandomColor();
    },
    onDomainDelete(domain) {
      const index = this.domains.indexOf(domain);
      this.domains.splice(index, 1);
    },
    getRandomColor() {
      return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
    },
  },
};
</script>

在上面的代码中，每个域名的数据结构是一个对象，其中包含一个 `name` 属性表示域名的值，和一个 `color` 属性表示该域名的背景色。在 `onDomainEnter` 方法中，我们为新输入的域名生成一个随机的背景色，并将其保存到 `color` 属性中。在模板中，我们使用 `v-for` 指令循环渲染每个域名的输入框和删除按钮。每个输入框的值使用 `v-model` 指令双向绑定到对应的域名对象的 `name` 属性上。每个域名的背景色使用 `:style` 绑定到对应的域名对象的 `color` 属性上。删除按钮使用一个单独的组件 `CloseButton` 来实现，点击该按钮时会触发 `onDomainDelete` 方法来移除该域名。