el-input宽度跟随输入内容自适应的实现方法

<div class="inputStyle">
      <el-input
        @input="getValue"
        v-model="value1"
        :style="{ width: spanWidth }"
      ></el-input>
      <span class="spanText">{{ spanText }}</span>
    </div>

methods: {
    getValue(val) {
      this.spanText = val;
      const spanStyle = document.querySelector(".spanText");
      this.$nextTick(() => {    // 如果不用$nextTick的话页面并不会更新，它是在下次dom更新后再渲染到页面上
        this.spanWidth =
          spanStyle.offsetWidth < 160
            ? "160px"
            : spanStyle.offsetWidth + 30 + "px";
      });
    },
  },

.inputStyle {
  margin-top: 30px;
  width: 300px;
}
.spanText {
  font-size: 12px;
  position: absolute;
  left: 0;
  padding: 0 15px;
  white-space: nowrap;
  visibility: hidden;
}

 <el-input v-model="value1" class="inputStyle">
        <template slot="prefix">
          {{ value1 }}
        </template>
      </el-input>

.inputStyle {
  margin-top: 30px;
  text-align: start;    // 这里一样要设置，否则不是对齐的居中状态
  min-width: 160px;   //这里给一个最小宽度
}
.el-input {
   width: auto;  // 这里一定要设置为auto 否则由于input是默认width ：100%的
}
.inputStyle >>> .el-input__prefix {
  display: inline-block;
  position: relative;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  padding: 0 30px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  padding-left: 30px;
  left: 0;
  visibility: hidden;
}
.inputStyle >>> .el-input__inner {
  position: absolute;
}