vue中实现input随输入宽度变化

vue中实现input随输入宽度变化

项目需求iinput的输入框实现,随输入内容变宽

input标签特点：固定宽度，不会随着内容变化

实现方案

使用一个div标签包裹，一个span和input标签，div的高度由span撑起，input的宽度等于100%,input相对div定位，left为0，盖在span上input的value的值放到span标签中，这样随着span的变化div的宽度发生变化input页会变

代码实现

<template>
    <div class="title">
            <span>{{ inputValue }}</span>
              <input type="text" placeholder="输入类别名称" 
                     v-model="inputValue">
          </div>
</template>
<script>export default {
  name: "SetTag",
  components: {Inout},
  data(){
    return {
      inputValue:''
    }
};
</script>
<style>
 >.title{
      max-width: 100%;
      position: relative;
      min-width: 100px;
      margin: 14px 0;
      display: inline-block;
      border-bottom: 1px solid #6d6d6d;
      >span{
        display: inline-block;
        max-width: 100%;
      }
      >input{
        width: 100%;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        opacity: 1;
        text-align: center;
        caret-color: black;
        border: none;
      }
    }
</style>