input-宽度自适应变化

要实现上述的效果：输入框的宽度随着输入的文字长度变化。而<input>这个标签有自己的想法，如果没有给它设置一个固定的宽度，它就会有一个默认的不变的宽度，想让它动态伸展是不可能。那怎么办呢？

那就设置它的宽高都为100%，让它随着父元素改变，那父元素的宽高如何确定呢？给个<span>标签来撑起来，<span>的宽高就可以根据它内部的内容来动态改变宽高啦，它内部的内容当然就是与<input>输入的内容同步了，把<span>标签隐藏在<input>标签下面，暗搓搓地操控全局。

<div class="add-tag tag-item">    <span>{{ inputValue }}</span>    <input         ref="input"        placeholder="添加标签"        v-model="inputValue"     /></div>... .add-tag {    color: #333;    border-style: dashed;    padding: 0;    position: relative;    span {        display: inline-block;        min-width: 184px;        height: 100%;        padding: 0 32px;    }    input {        display: inline-block;        position: absolute;        left: 0;        width: 100%;        height: 100%;        font-size: 28px;        caret-color: #426BF2;        ::-webkit-input-placeholder {            color: #aaa;        }        border-radius: 40px;        border-style: none;        padding: 0 32px;    }}