Vue IP地址輸入框實例代碼
更新時間：2023年10月26日 14:40:21 作者：Krpgly
本文通過實例代碼給大家介紹Vue IP地址輸入框實現(xiàn),代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
Vue IP地址輸入框
效果
使用
<template> <IpInput ref="ipInput"></IpInput> </template>
this.$refs.ipInput.getIP("10.90.15.66");
const ip = this.$refs.ipInput.value.getIP();
console.log(ip);代碼
<template>
<div v-for="(item, index) in ipAddress" :key="index" style="display: flex; width: 25%">
<el-input ref="ipInput" v-model="item.value" type="text" @input="checkFormat(item)" @keydown="setPosition(item, index, $event)" />
<div v-if="index < 3">.</div>
</div>
</template>
<script>
export default {
data() {
return {
ipAddress: [
{
value: ""
},
{
value: ""
},
{
value: ""
},
{
value: ""
}
]
};
},
// 開啟實時更新并emit IP地址
// watch: {
// ipAddress: {
// // 雙向數(shù)據(jù)綁定的value
// handler: function () {
// this.$emit("changed", this.getIP());
// },
// deep: true
// }
// },
methods: {
// 檢查格式
checkFormat(item) {
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;
},
// 判斷光標位置
async setPosition(item, index, event) {
if (event && event.currentTarget.selectionStart !== event.currentTarget.selectionEnd) {
return;
}
if (event && (event.key === "ArrowRight" || event.key === "ArrowLeft")) {
event.preventDefault(); // 阻止事件的默認行為
}
if (event.key === "ArrowLeft") {
// 向左移動
if (event.currentTarget.selectionStart === 0) {
this.previousBlock(index);
} else {
event.currentTarget.selectionStart -= 1;
event.currentTarget.selectionEnd = event.currentTarget.selectionStart;
}
} else if (event.key === "ArrowRight") {
// 向右移動
if (event.currentTarget.selectionStart === item.value.toString().length) {
this.nextBlock(index);
} else {
// 正常格內移動
event.currentTarget.selectionStart += 1;
event.currentTarget.selectionEnd = event.currentTarget.selectionStart;
}
} else if (event.key === "Backspace") {
// 刪除鍵
if (/* item.value.toString() === "" && */ event.currentTarget.selectionStart === 0) {
this.previousBlock(index);
}
} else if (event.key === "Enter" || event.key === "." || event.key === " ") {
// 回車鍵、點和空格鍵均向右移動
this.nextBlock(index);
} else if (item.value.toString().length === 3 && event.currentTarget.selectionStart === 3) {
// 輸入3位后光標自動移動到下一個文本框
this.nextBlock(index);
}
},
nextBlock(index) {
if (index < 3) {
const element = this.$refs.ipInput[index + 1];
element.$el.querySelector(".el-input__inner").selectionStart = 0;
element.$el.querySelector(".el-input__inner").selectionEnd = 0;
element.focus();
}
},
previousBlock(index) {
if (index > 0) {
const element = this.$refs.ipInput[index - 1];
const position = this.ipAddress[index - 1]?.value?.toString().length;
element.$el.querySelector(".el-input__inner").selectionStart = position;
element.$el.querySelector(".el-input__inner").selectionEnd = position;
element.focus();
}
},
setIP(ip) {
const values = ip.split(".");
for (const i in this.ipAddress) {
this.ipAddress[i].value = values[i] ?? "";
}
},
getIP() {
let result = "";
for (const i in this.ipAddress) {
if (i > 0) result += ".";
result += this.ipAddress[i].value;
}
return result;
}
}
};
</script>
補充：Vue3實現(xiàn)IP地址輸入框
前言
在網(wǎng)上找了一點資料，但是還是覺得不太行，就自己寫了一個，與網(wǎng)上的也大差不差，都是用4個輸入框和.號組合起來的，主要就是監(jiān)聽輸入框事件和鍵盤按下事件還有光標位置完成的，廢話不多說，直接復制就可以用了。
使用方法
1.我已經(jīng)將這個代碼注冊為了一個組件，在自己的組件庫中創(chuàng)建文件IpModel.vue，將下面的代碼復制到組件中。
#IpModel.vue
<template>
<div class="ip-input">
<input id="ip1" v-model="ip1" ref='input1' @input="handleInput(1)" @keydown="handleKeyDown($event, 1)"
maxlength="3" />
<span>.</span>
<input id="ip2" v-model="ip2" ref='input2' @input="handleInput(2)" @keydown="handleKeyDown($event, 2)"
maxlength="3" />
<span>.</span>
<input id="ip3" v-model="ip3" ref='input3' @input="handleInput(3)" @keydown="handleKeyDown($event, 3)"
maxlength="3" />
<span>.</span>
<input id="ip4" v-model="ip4" ref='input4' @input="handleInput(4)" @keydown="handleKeyDown($event, 4)"
maxlength="3" />
</div>
</template>
<script>
export default {
name: "IpModel",
props: {
IP: String,
},
data() {
return {
ip1: "",
ip2: "",
ip3: "",
ip4: "",
};
},
methods: {
handleInput(index) {
this[`ip${index}`] = this[`ip${index}`].replace(/[^0-9]/g, '')
let ip = this[`ip${index}`];
if (ip.length > 1 && ip[0] === "0") {
this[`ip${index}`] = ip.slice(1);
}
if (ip > 255) {
this[`ip${index}`] = "255";
}
if (ip.length === 3 || ip[0] === "0") {
let nextIndex = index + 1;
if (nextIndex <= 4) {
this.$refs[`input${nextIndex}`].focus();
}
}
},
handleKeyDown(event, index) {
let ip = this[`ip${index}`];
if (event.keyCode == 8 && 0 == document.getElementById(`ip${index}`).selectionStart) {
let nextIndex = index - 1;
if (nextIndex >= 1) {
this.$refs[`input${nextIndex}`].focus();
document.getElementById(`ip${nextIndex}`).setSelectionRange(this[`ip${nextIndex}`].length, this[`ip${nextIndex}`].length)
}
} else if (event.keyCode == 46 && ip.length == document.getElementById(`ip${index}`).selectionStart) {
let nextIndex = index + 1;
if (nextIndex <= 4) {
this.$refs[`input${nextIndex}`].focus();
document.getElementById(`ip${nextIndex}`).setSelectionRange(0, 0)
}
}
else if ((event.keyCode == 37) && 0 == document.getElementById(`ip${index}`).selectionStart) {
let nextIndex = index - 1;
if (nextIndex >= 1) {
this.$refs[`input${nextIndex}`].focus();
document.getElementById(`ip${nextIndex}`).setSelectionRange(this[`ip${nextIndex}`].length, this[`ip${nextIndex}`].length)
}
} else if ((event.keyCode == 39) && ip.length == document.getElementById(`ip${index}`).selectionStart) {
let nextIndex = index + 1;
if (nextIndex <= 4) {
this.$refs[`input${nextIndex}`].focus();
document.getElementById(`ip${nextIndex}`).setSelectionRange(0, 0)
}
} else if (event.keyCode == 110 || event.keyCode == 190) {
let nextIndex = index + 1;
if (nextIndex <= 4) {
this.$refs[`input${nextIndex}`].focus();
}
} else {
return false
}
},
IpModelSend() {
if (this.ip1 == '' || this.ip2 == '' || this.ip3 == '' || this.ip4 == '') {
this.$message({
duration: 1000,
message: 'IP地址非法,請輸入正確的IP地址!'
});
} else {
const ip = this.ip1 + '.' + this.ip2 + '.' + this.ip3 + '.' + this.ip4
this.$emit('changeIP', ip);
}
},
IpModelCancel() {
this.ip1 = this.IP.split('.')[0]
this.ip2 = this.IP.split('.')[1]
this.ip3 = this.IP.split('.')[2]
this.ip4 = this.IP.split('.')[3]
}
},
};
</script>
<style scoped>
.ip-input {
display: flex;
justify-content: space-between;
align-items: center;
width: 160px;
height: 40px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0 10px;
box-sizing: border-box;
font-size: 16px;
}
.ip-input input {
width: 30px;
height: 90%;
border: none;
outline: none;
text-align: center;
font-size: 16px;
}
.ip-input span {
font-size: 16px;
}
</style>
2.在需要使用到IP輸入框的地方調用組件即可，例如：
<template>
<div>
<button class="ethernet" @click="IPVisible = true">IP輸入框</button>
<el-dialog v-model="IPVisible" title="" width="350px" align-center>
<IpModel ref="ipModel" :IP="IP" v-on:changeIP="changeIP"></IpModel>
<template #footer>
<el-button @click="ipModelSure">確認</el-button>
<el-button @click="ipModelCancel">取消</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import IpModel from '../components/IpModel.vue'
export default {
components: {
IpModel
},
data() {
return {
IPVisible: false,
IP: "127.0.0.1",
}
},
methods: {
ipModelSure() {
this.$refs.ipModel.IpModelSend(); // 調用IpModel子組件的IpModelSend方法
},
ipModelCancel() {
this.IPVisible = false
this.$refs.ipModel.IpModelCancel(); // 調用IpModel子組件的IpModelCancel方法
},
changeIP(value) {
console.log(value)
this.IPVisible = false
},
},
}
</script>
<style scoped></style>
3.當點擊確定按鈕時，父組件通過this.$refs.ipModel.IpModelSend();去調用子組件的方法，子組件通過this.$emit('changeIP', ip);返回ip值，父組件通過監(jiān)聽事件changeIP調用方法打印出ip
4.當點擊取消按鈕時，父組件通過this.$refs.ipModel.IpModelCancel();去調用子組件的方法，重新給ip賦值，使數(shù)據(jù)不產(chǎn)生變化
到此這篇關于Vue IP地址輸入框的文章就介紹到這了,更多相關vue ip地址輸入框內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了Element-ui?Dialog對話框基本使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了解決vant-UI庫修改樣式無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
ue3.2新增了一個指令v-memo,引入這個指令的目的是幫助大家更好的為我們的應用做性能優(yōu)化,下面這篇文章主要給大家介紹了關于vue3.2新增指令v-memo基本使用的相關資料,需要的朋友可以參考下2022-09-09
elementUI中input回車觸發(fā)頁面刷新問題與解決方法
這篇文章主要給大家介紹了關于elementUI中input回車觸發(fā)頁面刷新問題與解決方法,文中通過實例代碼介紹的非常詳細,對大家學習或者使用elementUI具有一定的參考學習價值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了使用vant-uploader上傳照片無法刪除的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue3中reactive不能直接賦值的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家詳細介紹了vue.js框架實現(xiàn)表單排序和分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了在Vue和React中如何優(yōu)雅地使用loading，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案
vite+vue3項目發(fā)布后,瀏覽器上還是舊代碼,沒有及時更新到最新代碼,下面通過本文給大家分享vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案,感興趣的朋友一起看看吧2024-06-06
這篇文章主要介紹了vue動態(tài)子組件的兩種實現(xiàn)方式,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09