Vue实现input宽度随文字长度自适应

业务需求，输入文字，后面的元要紧随其后，奈何input默认是有宽度，我想要达到，输入文字，动态改变input的宽度,试了很多方法，目前自己琢磨一种，有遇到问题的可以参考一下，

直接贴代码

<div class="textcontain">
          <input
            type="text"
            v-model.number="item.cardComboMoney"
            maxlength="5"
            placeholder="设定数值"
            oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
            :disabled='disabled'
            :style="{width:text(item.cardComboMoney)}"
          >
          <span
            class="textshow"
            v-if="item.cardComboMoney!=0&&item.cardComboMoney!=''"
          >元</span>
        </div>

computed: {
    text () {
      return function (value) {
        if (value == '' || value == 0) {
          return '100%'
        } else {
          return String(value).length * 0.32 + 'rem'
        }
      }
    }
  },

利用计算属性，计算当前字体的长度，我这里最多允许输入5个字符的长度，所以这样计算影响不大