業務需求，輸入文字，后面的元要緊隨其后，奈何input默認是有寬度，我想要達到，輸入文字，動態改變input的寬度,試了很多方法，目前自己琢磨一種，有遇到問題的可以參考一下，
直接貼代碼
type="text"
v-model.number="item.cardComboMoney"
maxlength="5"
placeholder="設定數值"
οninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
:disabled='disabled'
:style="{width:text(item.cardComboMoney)}"
>
class="textshow"
v-if="item.cardComboMoney!=0&&item.cardComboMoney!=''"
>元
computed: {
text () {
return function (value) {
if (value == '' || value == 0) {
return '100%'
} else {
return String(value).length * 0.32 + 'rem'
}
}
}
},
利用計算屬性，計算當前字體的長度，我這里最多允許輸入5個字符的長度，所以這樣計算影響不大
補充知識：input寬度自適應(解決文字占位寬度不同所引起的問題)
問題描述：
input在輸入的時候，要能讓input的寬度隨著輸入的文字自動增寬。
思路1：獲取文字的內容，然后通過文字.length * font-size計算文字的寬度，但是由于文字“i”與“中”顯然占位寬度不同而引起寬度差
思路：
設置一個隱藏的span，使其font屬性與input統一，然后獲取span的寬度，賦值給input
input寬度自適應body {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
#my-input {
width: 20px;
padding: 0;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
#my-span {
position: absolute;
left: 0;
visibility: hidden;
}
function changeWidth() {
var mySpan = $("#my-span");
var myInput = $("#my-input");
mySpan.html(myInput.val()); //給span賦值
if (mySpan.width() > 20) {
myInput.css('width', mySpan.width());
}
}
以上這篇Vue實現input寬度隨文字長度自適應操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
