UI Components > Masked Input
vue-ip-input
An ip input implement by vue 2.0
Demo
Usage
Install
npm install vue-ip-input --save
CommonJS
var VueIpInput = require('vue-ip-input');
new Vue({
components: {
'vue-ip-input': VueIpInput
},
data: function () {
return {
ip: '127.0.0.1'
};
},
methods: {
onIpChange: function(ip) {
console.log('ip input change:', ip);
},
onIpBlur: function (ip) {
console.log('ip input blur:', ip);
}
},
template: '<vue-ip-input :ip="ip" :on-change="onIpChange" :on-blur="onIpBlur"></vue-ip-input>'
});
ES6
import VueIpInput from 'vue-ip-input';
new Vue({
components: {
'vue-ip-input': VueIpInput
},
data() {
return {
ip: '127.0.0.1'
};
},
methods: {
onIpChange(ip) {
console.log('ip input change:', ip);
},
onIpBlur(ip) {
console.log('ip input blur:', ip);
}
},
template: '<vue-ip-input :ip="ip" :on-change="onIpChange" :on-blur="onIpBlur"></vue-ip-input>'
})
Props
| Property | Description |
|---|---|
| ip | the value of ip input |
| onChange | trigger when the ip change |
| onBlur | trigger when the input blur |
Contribution
First, install dependencies
npm install
Second, setup development environment
npm run dev