vue 实现input type="textarea" 输入域名如果输入完成回车则这个域名会有黄色背景；域名后面有个叉号可以删除域名，双击支持编辑域名

你可以使用 Vue 的 v-model 指令绑定一个 data 属性来实现输入域名的功能，使用 @keyup.enter 事件监听回车键，当输入完成时添加一个类名来改变背景颜色。叉号可以通过在输入框后面添加一个删除图标实现，点击图标时将绑定的 data 属性设置为空。双击事件可以使用 @dblclick 实现，将输入框的 readonly 属性移除就可以编辑域名了。以下是一个简单的示例代码：

<template>
  <div>
    <textarea v-model="domain" class="input" @keyup.enter="onEnter" :class="{ 'highlight': isCompleted }"></textarea>
    <span v-show="isCompleted" class="delete-icon" @click="onDelete">X</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      domain: '',
      isCompleted: false
    }
  },
  methods: {
    onEnter() {
      this.isCompleted = true
    },
    onDelete() {
      this.domain = ''
      this.isCompleted = false
    },
    onDoubleClick() {
      this.$refs.inputField.removeAttribute('readonly')
    }
  }
}
</script>

<style>
.input {
  width: 100%;
  height: 100px;
  border: none;
  padding: 10px;
  font-size: 16px;
}

.highlight {
  background-color: yellow;
}

.delete-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  cursor: pointer;
}
</style>

在这个示例中，我们使用了一个 data 属性 `domain` 来绑定输入框的值，使用一个布尔值 `isCompleted` 来判断输入完成并添加背景颜色。我们监听了 `@keyup.enter` 事件来判断是否按下回车键，监听 `@click` 事件来删除域名，监听 `@dblclick` 事件来移除输入框的 readonly 属性。最后，我们使用了一个样式类名来改变输入框的背景颜色。