https://github.com/peteringram0/vue-ip

IP Address input for VueJS 2.x
https://github.com/peteringram0/vue-ip

input ip material material-design vuejs2

Last synced: 4 months ago
JSON representation

IP Address input for VueJS 2.x

• Host: GitHub
• URL: https://github.com/peteringram0/vue-ip
• Owner: peteringram0
• Created: 2018-01-07T21:33:31.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2021-03-03T20:16:58.000Z (almost 4 years ago)
• Last Synced: 2024-04-25T23:02:29.794Z (10 months ago)
• Topics: input, ip, material, material-design, vuejs2
• Language: Vue
• Homepage: https://peteringram0.github.io/vue-ip/
• Size: 31.3 KB
• Stars: 25
• Watchers: 3
• Forks: 13
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vue IP

A IP input component built for Vue 2.x

![Demo](https://media.giphy.com/media/l49JMe9WDPzJTamwE/giphy.gif)

[Demo](https://peteringram0.github.io/vue-ip/)

### Install

````javascript

$ yarn add vue-ip

````

### Usage

```javascript

import VueIp from 'VueIp';

new Vue({

    components: {

        VueIp

    },

    data() {

        return {

            ip: '127.0.0.1', // or null

            port: '8888', // or null

        };

    },

    methods: {

        

        /**

        * Will be called on changes to IP address or port 

        */

        change(ip, port, valid) {

            console.log(ip, port, valid);

        }

        

    },

    template: ''

})

```

### Supports

* Pasting (with IP or with IP and port)

* IP Validation

* Optional material design theme

* Optional Port

* No sub dependencies

### Props

| Prop        	| Type     	| Options                             	              |

|-------------	|----------	|---------------------------------------------------- |

| on-change   	| function 	| Will be called when changes                         |

| ip          	| string   	| null or ip address '127.0.0.1'      	              |

| port        	| string   	| null or '8080'                      	              |

| placeholder 	| boolean   | will show a dummy ip address within the placeholder |

| theme       	| string   	| 'material' (material design themed) 	              |

### License

[MIT](http://opensource.org/licenses/MIT)

#### Inspired by

[lakb248](https://github.com/lakb248/vue-ip-input)