寬度自適應變化

要實現上述的效果：輸入框的寬度隨着輸入的文字長度變化。而<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;
    }
}