前言
實現原理是用4個文本框拼到一起,中間加一個點樣式,再加上對於內容的限制爲0-255,再加上光標位置的判斷即可。
具體內容
- 在該目錄下創建組件文件
文件內容如下
<template>
<ul class="ipAdress">
<li v-for="(item,index) in ipAddress">
<input ref="ipInput" v-model="item.value" type="text" class="ipInputClass" @input="checkIpVal(item)" @keyup="turnIpPosition(item,index,$event)"/>
<div></div>
</li>
</ul>
</template>
<script>
export default {
props: {
value: {
type: String,
default: ''
}
},
data() {
return {
ipAddress: [
{
value: ''
},{
value: ''
},{
value: ''
},{
value: ''
}
]
}
},
watch: {
ipAddress: { // 雙向數據綁定的value
handler: function (newVal, oldVal) {
let str = ''
for (const i in this.ipAddress) {
str += this.formatter(this.ipAddress[i].value)
}
if (str === '000000000000') {
str = ''
}
this.$emit('input', str)
},
deep: true
}
},
methods: {
// 格式化補零方法
formatter(val) {
let value = val.toString()
if (value.length === 2) {
value = '0' + value
} else if (value.length === 1) {
value = '00' + value
} else if (value.length === 0) {
value = '000'
}
return value
},
// 檢查ip輸入爲0-255
checkIpVal(item) {
//確保每個值都處於0-255
let val = item.value;
// 處理非數字
val = val.toString().replace(/[^0-9]/g,'');
val = parseInt(val, 10);
if(isNaN(val)) {
val = ''
} else {
val = val < 0 ? 0 : val;
val = val > 255 ? 255 : val;
}
item.value = val;
},
// 光標位置判斷
turnIpPosition(item, index, event) {
let self = this;
let e = event || window.event;
if (e.keyCode === 37) { // 左箭頭向左跳轉,左一不做任何措施
if(index !== 0 && e.currentTarget.selectionStart === 0) {
self.$refs.ipInput[index - 1].focus();
}
} else if (e.keyCode == 39) { // 右箭頭向右跳轉,右一不做任何措施
if(index !== 3 && e.currentTarget.selectionStart === item.value.toString().length) {
self.$refs.ipInput[index + 1].focus();
}
} else if (e.keyCode === 8) { // 刪除鍵把當前數據刪除完畢後會跳轉到前一個input,左一不做任何處理
if(index !== 0 && item.value === '') {
self.$refs.ipInput[index - 1].focus();
}
} else if (e.keyCode === 13 || e.keyCode === 32 || e.keyCode === 190) {// 回車鍵、空格鍵、冒號均向右跳轉,右一不做任何措施
if(index !== 3) {
self.$refs.ipInput[index + 1].focus();
}
} else if (item.value.toString().length === 3) { // 滿3位,光標自動向下一個文本框
if(index !== 3) {
self.$refs.ipInput[index + 1].focus();
}
}
}
}
}
</script>
<style type="text/css" scoped>
.ipAdress{
display: flex;
border: 1px solid #dcdfe6;
border-radius: 4px;
width: 196px;
height: 36px;
padding-inline-start: 0px;
}
.ipAdress li{
position: relative;
height: 36px;
margin: 0;
list-style-type: none;
}
.ipInputClass{
border: none;
width: 49px;
height: 23px;
text-align: center;
background: transparent;
}
.ipAdress li div{
position: absolute;
bottom: 8px;
right: 0;
border-radius: 50%;
background: #505050;
width: 2px;
height: 2px;
}
/*只需要3個div*/
.ipAdress li:last-child div{
display: none;
}
/*取消掉默認的input focus狀態*/
.ipAdress input:focus{
outline: none;
}
</style>
2.具體用法
先引入組件
然後如下使用
3.效果
後記
具體使用中根據項目樣式風格調調樣式,改改方法就可以了。