1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
| <template>
| <ul class="ipAdress">
| <li v-for="(item,index) in ipAdress" :key="'item'+index">
| <input type="text" @input="checkIpVal(item,index)" @keyup="turnIpPOS(item,index,$event)"
| v-model="item.value" ref="ipInput" @blur="setDefaultVal(item)"/>
| <div></div>
| </li>
| </ul>
| </template>
|
| <script>
| export default {
| name: "ipInput",
| data() {
| return {
| ipAdress: [
| {
| value: ''
| },
| {
| value: ''
| },
| {
| value: ''
| },
| {
| value: ''
| }
| ]
| }
| },
| 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 {
| 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;
| // console.log(index);
| //删除键把当前数据删除完毕后会跳转到前一个input，左一不做任何处理
| if (e.keyCode == 8) {
| let val = item.value;
| console.log(val);
| if (index == 0) { } else if(val==''){
| self.$refs.ipInput[index - 1].focus();
| }
| }
| //右箭头、回车键、空格键、冒号均向右跳转，右一不做任何措施
| if (e.keyCode == 39 || e.keyCode == 13 || e.keyCode == 32 || e.keyCode == 190 || e.keyCode == 110) {
| if (index == 3) { } 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>
|
| <style scoped>
| .ipAdress {
| display: flex;
| align-items: center;
| border: 1px solid #0190FE;
| width: 148px;
| margin-right: 10px;
| padding: 0;
| }
|
| .ipAdress li {
| position: relative;
| height: 23px;
| margin: 0;
| list-style: none;
| }
|
| 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>
|
|
