Element ui input组件类型为 textarea 时没有 清空按钮

去github上看 element-ui的 issues，发现2020年就有这个 pr，但是我的这个版本(2.15.14)好像是没有，秉承着不行就自己加的原则，自己写了一个，代码如下：

<template>
  <span class="text-input">
    <el-input
      v-bind="$attrs"
      v-model="modelValue"
      type="textarea"
      @blur="onBlur()"
      @focus="onFocus()"
      v-on="$listeners"
    />
    <span v-if="clearable && showClearIcon && modelValue" class="clear-area">
      <i
        class="el-icon-circle-close clear-button"
        @click="handleClear"
        @mousedown.prevent
      ></i>
    </span>
  </span>
</template>
<script>
export default {
  name: "TextArea",
  model: {
    value: "value",
    event: "change",
  },
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    clearable: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      modelValue: "",
      showClearIcon: false,
    };
  },
  created() {
    this.modelValue = this.value;
  },
  watch: {
    modelValue(val) {
      this.$emit("change", val);
    },
  },
  methods: {
    onBlur() {
      this.showClearIcon = false;
    },
    onFocus() {
      this.showClearIcon = true;
    },
    handleClear() {
      this.modelValue = "";
      this.$emit("change", "");
    },
  },
};
</script>

<style lang="scss" scoped>
.text-input {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  .clear-area {
    position: absolute;
    border-radius: 5px;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    width: 25px;
    display: flex;
    align-items: center;
  }
  .clear-button {
    border: none;
    cursor: pointer;
    color: #ccc;
  }

  .clear-button:hover {
    color: #878d99;
  }
}

::v-deep .el-textarea__inner {
  padding-right: 30px;
}
</style>