vue實現移動端多格輸入框(h5頁面多格輸入)

2021-08-23 14:28:06 字數 817 閱讀 6772

近來公司提出需求,完成如下圖h5頁面操作。

網上沒什麼輪子可以使用,就自己徒手擼了乙個。不多廢話,直接上**。

class="verify-tel">

ref="pwd"

:maxlength="digits.length"

v-model="msg"

style="position: absolute;z-index: -1;opacity: 0"/>

class="pwd-wrap" @click="focus">

v-for="(item,key) in digits"

:style="" >

v-if="msglength > key">

}span>

li>

ul>

div>

div>

css部分(樣式內容過於繁瑣,請自行省去修改)

html,body

.verify-tel

>h1

>h2

.input-box

&:last-of-type}}

.btn-box}}

} .pwd-wrap

.pwd-wrap

li >span

} .pwd-wrap

li:last-child

.pwd-wrap

liijs部分**

H5輸入框擋住解決

需求 h5介面底部有個輸入框,當鍵盤彈出的時候會把輸入框擋住。先說結論 設定manifest中包含該webview的activity的屬性 android windowsoftinputmode adjustresize 解決基礎 基本原理還是使用系統的規則。通過manifest中activity的...

h5移動端適配

原理 postcss function 視覺稿的1 10 在index.html中指定 font size為document寬度的1 10 iphonex 的解析度 2436 1125 pt 812 375 dpr 3 iphonexr的解析度 1792 828 pt 896 414 dpr 3 i...

移動端h5優化

1 減少js載入體積 很多庫能用cdn的盡量使用cdn,這樣打包出來的js體積會很小,載入很快。2 盡量採用比較輕量級的ui 元件庫 比如museui,mintui等 4 儘量減少網路請求數量 程式中的資料,有的能乙個介面返回的盡量乙個介面返回,不要弄太多的介面。5 盡量把大的js 檔案進行分割成小...