vue项目移动端实现ip输入框问题

2020-06-12 21:19:31易采站长站整理

let val = parseInt(item.value.replace(/[^d]/g, ""), 10);
val = isNaN(val) ? '' : val;
if(e.keyCode == 8 && index > 0 && val.length==0) {
self.$refs.ipInput[index - 1].focus();
}
}
},
mounted(){
console.log(this.$props)
console.log(this.$attrs.index)
}
};
</script>

<style lang="scss" scoped>
$--border-color:#ccc;
$--outline-color:transparent;
$--font-color:$--input-color;
$base-font-size:12px;
.ipInput {
box-sizing: border-box;
line-height: inherit;
border: 1px solid $--border-color;
overflow: hidden;
border-radius: 5px;
padding: 0;
margin: 0;
display: inline-block;
vertical-align: middle;
outline: $--outline-color;
font-size:0;
text-indent: 0;
background: #fff;
&.isDisabled {
background: $--outline-color;

li{
cursor:not-allowed;
input{
cursor:not-allowed;
}
}
}
li {
display: inline-block;
width:25%;
box-sizing: border-box;
font-size:0;
input {
appearance: none;
padding:10px 5px;
width: calc(100% - 3px);
text-align: center;
outline: none;
border: none;
color: $--font-color;
box-sizing: border-box;
font-size: $base-font-size;
&:disabled {
background: $--outline-color;
}
}
span {
display: inline-block;
font-size:$base-font-size;
width: 3px;
color: $--font-color;
}
}
}
</style>