模拟elementui输入框el-input样式效果

背景：

使用elementui组件时，通常会碰到这类需求，需要el-input一样的样式效果，但是不能输入，却需要点击叉叉删除文字内容，提供的原始属性无法满足，所以需要做一些改动。

要求：

1、交互效果和el-input一致；
2、不可输入，但是可以点击右侧叉叉清空内容；
3、右侧叉叉在文本框没有内容时隐藏，有内容时，鼠标移上去显示，鼠标移出隐藏；

效果图如下：

代码如下：vue 2.6.11

<template>
  <div class="page-wrapper">
    <div
      style="width: 300px"
      @click="() => {}"
      class="compute-score el-input el-input--small el-input--prefix el-input--suffix"
      :class="{
        'is-disabled': false,
      }"
    >
      <input
        type="text"
        readonly
        :value="formData.Text"
        autocomplete="off"
        maxlength="50"
        class="el-input__inner"
      />
      <span class="el-input__prefix">
        <span
          class="el-input__icon placeholder-text-color"
          style="padding-right: 4px"
        >
          <i class="el-icon-edit"></i>
        </span>
      </span>
      <span class="el-input__suffix">
        <span class="el-input__suffix-inner">
          <i
            v-if="formData.Text"
            @click.stop="clearText()"
            class="el-input__icon el-icon-circle-close el-input__clear cus-close"
          ></i>
          <span
            class="el-input__icon"
            style="line-height: 30px; padding-top: 2px"
          >
            时
          </span>
        </span>
      </span>
    </div>

    <el-button
      style="margin-left: 20px"
      @click="() => (formData.Text = 'abc111')"
      >赋值</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        Text: "abc",
      },
    };
  },

  mounted() {},
  methods: {
    clearText() {
      this.formData.Text = "";
    },
  },
};
</script>

<style scoped lang="scss">
.page-wrapper {
  padding: 50px;
}

.compute-score {
  position: relative;
  cursor: pointer;
  .el-input__icon {
    // display: inline-block;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cus-close {
    position: absolute;
    top: 0;
    right: 20px;
    display: none;
  }
  &:hover {
    .cus-close {
      display: block;
    }
  }
}
</style>