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