当el-input输入框设置字符限制后，清空图标如何避免被超出字数的文字遮挡？

当在Vue的`el-input`组件中设置了字符限制，并且显示了清空图标以允许用户删除输入内容时，如果文字超过限制而溢出输入框，可以采取以下几种策略来避免清空图标被遮挡：

1. **动态调整宽度**：你可以监听`input`元素的`input`事件，实时计算剩余的宽度并动态调整输入框的宽度，以便图标不会被文字完全覆盖。

<template>
  <el-input v-model="value" :maxlength="maxLength" :clearable="true" @input="handleInputChange"></el-input>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      maxLength: 10,
    };
  },
  methods: {
    handleInputChange(e) {
      const remainingWidth = this.$refs.input.offsetWidth - this.$refs.clearIcon.clientWidth;
      if (remainingWidth <= 0) {
        // 如果文字导致图标位置过窄，调整宽度
        this.$refs.input.style.width = `${this.$refs.input.scrollWidth}px`;
      }
    },
  },
};
</script>

2. **自定义样式**：通过CSS调整输入框、图标以及输入内容的样式，比如使用`position: relative;`和`right`属性来移动图标到合适的位置，使其不会被文字遮挡。

.el-input__inner {
  position: relative;
}

.el-input__icon {
  position: absolute;
  right: calc(100% - /* 图标尺寸 */);
}