Fan-ip-input NPM

ip-input

Imitation of Microsoft IP input box

Feature

Imitation of Microsoft IP input box,Depends on the vue2,Using the Ant Design vue(1.7.8)'s components 【<a-input>】.

The mouse cursor moves in turn when press Arrow key
Unable to enter characters other than numbers
Compatibility processing under Chinese input method removes unallowed input character
Automatically focus to the next input box when the number in the input box is 3 digits
Numbers above 255 are converted to 255 when out of focus
When the mouse cursor is at the end of the input, press the period key to jump to the next input box
Support for pasting
May be more...

How to use

npm i fan-ip-input

main.js:

import fanIpInput from "fan-ip-input"

Vue.use(fanIpInput)

app.vue:

<template>
  <div id="app">
    <fan-ip-input v-model="ip"></fan-ip-input>
  </div>
</template>
<script>
export default {
  name:'app',
  data(){
    return{ip:'1.2.3.4'}
  }
}
</script>

Also，If you want to introduce it separately,just like this:

<template>
  <div id="app">
    <demo-input v-model="ip"></demo-input>
  </div>
</template>
<script>
import ipInput from 'fan-ip-input'
export default {
  name:'app',
  data(){
    return{ip:'1.2.3.4'}
  },
components:{
  demoInput:ipInput.fanIpInput,
 }
}
</script>