|
@@ -1,143 +1,127 @@
|
|
<template>
|
|
<template>
|
|
- <ul class="ipAdress">
|
|
|
|
- <li v-for="(item,index) in ipAdress" class="saga-border">
|
|
|
|
- <input
|
|
|
|
- type="text"
|
|
|
|
- @input="checkIpVal(item,index)"
|
|
|
|
- @keyup="turnIpPOS(item,index,$event)"
|
|
|
|
- v-model="item.value"
|
|
|
|
- ref="ipInput"
|
|
|
|
- @blur="setDefaultVal(item)"
|
|
|
|
- >
|
|
|
|
- <!-- <div></div> -->
|
|
|
|
- </li>
|
|
|
|
- <span>:</span>
|
|
|
|
- <li class="saga-border">
|
|
|
|
- <input
|
|
|
|
- type="text"
|
|
|
|
- @input="checkIpVal(value,4)"
|
|
|
|
- @keyup="turnIpPOS(value,4,$event)"
|
|
|
|
- v-model="value.value"
|
|
|
|
- ref="ipInput"
|
|
|
|
- @blur="setDefaultVal(value)"
|
|
|
|
- >
|
|
|
|
- <!-- <div></div> -->
|
|
|
|
- </li>
|
|
|
|
- </ul>
|
|
|
|
|
|
+ <ul class="ipAdress">
|
|
|
|
+ <li v-for="(item,index) in ipAdress" class="saga-border">
|
|
|
|
+ <input type="text" @input="checkIpVal(item,index)" @keyup="turnIpPOS(item,index,$event)" v-model="item.value" ref="ipInput" @blur="setDefaultVal(item)">
|
|
|
|
+ <!-- <div></div> -->
|
|
|
|
+ </li>
|
|
|
|
+ <span>:</span>
|
|
|
|
+ <li class="saga-border">
|
|
|
|
+ <input type="text" @input="checkIpVal(value,4)" @keyup="turnIpPOS(value,4,$event)" v-model="value.value" ref="ipInput" @blur="setDefaultVal(value)">
|
|
|
|
+ <!-- <div></div> -->
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
-export default {
|
|
|
|
- name: "ipInput",
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- ipAdress: [{
|
|
|
|
- value: ''
|
|
|
|
- }, {
|
|
|
|
- value: ''
|
|
|
|
- }, {
|
|
|
|
- value: ''
|
|
|
|
- }, {
|
|
|
|
- value: ''
|
|
|
|
- }],
|
|
|
|
- value: [{
|
|
|
|
- value: ''
|
|
|
|
- }]
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- created() { },
|
|
|
|
- mounted() { },
|
|
|
|
- methods: {
|
|
|
|
- //methods
|
|
|
|
- checkIpVal(item, index) {
|
|
|
|
- let self = this;
|
|
|
|
- //确保每个值都处于0-255
|
|
|
|
- let val = item.value;
|
|
|
|
- //当输入的是空格时,值赋为空
|
|
|
|
- val = val.trim();
|
|
|
|
- val = parseInt(val, 10);
|
|
|
|
- if (isNaN(val)) {
|
|
|
|
- val = ''
|
|
|
|
- } else {
|
|
|
|
- if (index == 4) {
|
|
|
|
- val = val < 0 ? 0 : val;
|
|
|
|
- val = val > 65535 ? 65535 : val;
|
|
|
|
- } else {
|
|
|
|
- val = val < 0 ? 0 : val;
|
|
|
|
- val = val > 255 ? 255 : val;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- item.value = val;
|
|
|
|
- },
|
|
|
|
- turnIpPOS(item, index, event) {
|
|
|
|
- let self = this;
|
|
|
|
- let e = event || window.event;
|
|
|
|
- //左箭头向左跳转,左一不做任何措施
|
|
|
|
- if (e.keyCode == 37) {
|
|
|
|
- if (index == 0) { } else {
|
|
|
|
- self.$refs.ipInput[index - 1].focus();
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- //删除键把当前数据删除完毕后会跳转到前一个input,左一不做任何处理
|
|
|
|
- if (e.keyCode == 8) {
|
|
|
|
- let val = item.value;
|
|
|
|
- if (index == 0) { } else {
|
|
|
|
- self.$refs.ipInput[index - 1].focus();
|
|
|
|
|
|
+ export default {
|
|
|
|
+ name: "ipInput",
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ ipAdress: [{
|
|
|
|
+ value: ''
|
|
|
|
+ }, {
|
|
|
|
+ value: ''
|
|
|
|
+ }, {
|
|
|
|
+ value: ''
|
|
|
|
+ }, {
|
|
|
|
+ value: ''
|
|
|
|
+ }],
|
|
|
|
+ value: [{
|
|
|
|
+ value: ''
|
|
|
|
+ }]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {},
|
|
|
|
+ mounted() {},
|
|
|
|
+ methods: {
|
|
|
|
+ //methods
|
|
|
|
+ checkIpVal(item, index) {
|
|
|
|
+ let self = this;
|
|
|
|
+ //确保每个值都处于0-255
|
|
|
|
+ let val = item.value;
|
|
|
|
+ //当输入的是空格时,值赋为空
|
|
|
|
+ val = val.trim();
|
|
|
|
+ val = parseInt(val, 10);
|
|
|
|
+ if (isNaN(val)) {
|
|
|
|
+ val = ''
|
|
|
|
+ } else {
|
|
|
|
+ if (index == 4) {
|
|
|
|
+ val = val < 0 ? 0 : val;
|
|
|
|
+ val = val > 65535 ? 65535 : val;
|
|
|
|
+ } else {
|
|
|
|
+ val = val < 0 ? 0 : val;
|
|
|
|
+ val = val > 255 ? 255 : val;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ item.value = val;
|
|
|
|
+ },
|
|
|
|
+ turnIpPOS(item, index, event) {
|
|
|
|
+ let self = this;
|
|
|
|
+ let e = event || window.event;
|
|
|
|
+ //左箭头向左跳转,左一不做任何措施
|
|
|
|
+ if (e.keyCode == 37) {
|
|
|
|
+ if (index == 0) {} else {
|
|
|
|
+ self.$refs.ipInput[index - 1].focus();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ //删除键把当前数据删除完毕后会跳转到前一个input,左一不做任何处理
|
|
|
|
+ if (e.keyCode == 8) {
|
|
|
|
+ let val = item.value;
|
|
|
|
+ if (index == 0) {} else {
|
|
|
|
+ self.$refs.ipInput[index - 1].focus();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ //右箭头、回车键、空格键、冒号均向右跳转,右一不做任何措施
|
|
|
|
+ if (e.keyCode == 39 || e.keyCode == 13 || e.keyCode == 32 || e.keyCode == 190) {
|
|
|
|
+ if (index == 4) {} else {
|
|
|
|
+ self.$refs.ipInput[index + 1].focus();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ setDefaultVal(item) {
|
|
|
|
+ //当input失去焦点,而ip没有赋值时,会自动赋值为0
|
|
|
|
+ let self = this;
|
|
|
|
+ let val = item.value;
|
|
|
|
+ if (val == '') {
|
|
|
|
+ item.value = '0';
|
|
|
|
+ }
|
|
|
|
+ },
|
|
}
|
|
}
|
|
- }
|
|
|
|
- //右箭头、回车键、空格键、冒号均向右跳转,右一不做任何措施
|
|
|
|
- if (e.keyCode == 39 || e.keyCode == 13 || e.keyCode == 32 || e.keyCode == 190) {
|
|
|
|
- if (index == 4) { } else {
|
|
|
|
- self.$refs.ipInput[index + 1].focus();
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- setDefaultVal(item) {
|
|
|
|
- //当input失去焦点,而ip没有赋值时,会自动赋值为0
|
|
|
|
- let self = this;
|
|
|
|
- let val = item.value;
|
|
|
|
- if (val == '') {
|
|
|
|
- item.value = '0';
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
|
|
+ }
|
|
</script>
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
-.ipAdress {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- margin-right: 10px;
|
|
|
|
- justify-content: space-around;
|
|
|
|
-}
|
|
|
|
-.ipAdress li {
|
|
|
|
- position: relative;
|
|
|
|
- // height: 23px;
|
|
|
|
- margin: 2px;
|
|
|
|
-}
|
|
|
|
-ul[class="ipAdress"] input[type="text"] {
|
|
|
|
- border: none;
|
|
|
|
- width: 100%;
|
|
|
|
- // height: 23px;
|
|
|
|
- text-align: center;
|
|
|
|
- background: transparent;
|
|
|
|
-}
|
|
|
|
-.ipAdress li div {
|
|
|
|
- position: absolute;
|
|
|
|
- bottom: 2px;
|
|
|
|
- right: 0;
|
|
|
|
- border-radius: 50%;
|
|
|
|
- background: #0190fe;
|
|
|
|
- width: 2px;
|
|
|
|
- height: 2px;
|
|
|
|
-}
|
|
|
|
-/*只需要3个div*/
|
|
|
|
-.ipAdress li:last-child div {
|
|
|
|
- display: none;
|
|
|
|
-}
|
|
|
|
-/*取消掉默认的input focus状态*/
|
|
|
|
-.ipAdress input:focus {
|
|
|
|
- outline: none;
|
|
|
|
-}
|
|
|
|
|
|
+ .ipAdress {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ margin-right: 10px;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ }
|
|
|
|
+ .ipAdress li {
|
|
|
|
+ position: relative; // height: 23px;
|
|
|
|
+ margin: 2px;
|
|
|
|
+ }
|
|
|
|
+ ul[class="ipAdress"] input[type="text"] {
|
|
|
|
+ border: none;
|
|
|
|
+ width: 100%; // height: 23px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ background: transparent;
|
|
|
|
+ }
|
|
|
|
+ .ipAdress li div {
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 2px;
|
|
|
|
+ right: 0;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ background: #0190fe;
|
|
|
|
+ width: 2px;
|
|
|
|
+ height: 2px;
|
|
|
|
+ }
|
|
|
|
+ /*只需要3个div*/
|
|
|
|
+ .ipAdress li:last-child div {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ /*取消掉默认的input focus状态*/
|
|
|
|
+ .ipAdress input:focus {
|
|
|
|
+ outline: none;
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|