<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;
    }
}