https://github.com/boussadjra/vueye-phone-input
phone number input built for Vue.js 3
https://github.com/boussadjra/vueye-phone-input
phone-input phone-validation vue-input vuejs-components vuejs3
Last synced: about 2 months ago
JSON representation
phone number input built for Vue.js 3
- Host: GitHub
- URL: https://github.com/boussadjra/vueye-phone-input
- Owner: boussadjra
- Created: 2020-12-24T21:38:15.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-01-09T17:48:38.000Z (over 4 years ago)
- Last Synced: 2025-04-12T19:13:26.444Z (about 2 months ago)
- Topics: phone-input, phone-validation, vue-input, vuejs-components, vuejs3
- Language: TypeScript
- Homepage: https://boussadjra.github.io/vueye-phone-input/
- Size: 2.71 MB
- Stars: 12
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vueye-phone-input
## Description :
It's a rich component that allows you to type a validate phone number, this component is based on [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js), this component supports only Vue.js 3.x
## Installation
npm install vueye-phone-input --save
## DEMO
[LIVE DEMO](https://boussadjra.github.io/vueye-phone-input/)
[Boilerplate](https://codesandbox.io/s/vueye-phone-input-l91zs?file=/src/App.vue)
## Usage
```js
Your phone number :
{{ phone }}
import { defineComponent } from "vue";
import VueyePhoneInput from "vueye-phone-input";
export default defineComponent({
name: "app",
components: {
VueyePhoneInput,
},
data() {
return {
phone: {
number: "",
nationalNumber: "",
isValid:false
},
};
},
});
```
## Props:
|Name|default|description|
|---------|-------|------|
|v-model |`null`| the two-way bound value |
|shape | `'rounded'` | define the component shape (`rounded`,`rounded-none`,`rounded-full`)|
|outlined | `false`| show the component with/out an outline |
|raised| `false`| add an elevation to the component|
|status| `''`|Specify the input status (`'error'`, `'success'` or `''`)|
|placeholder| `''`|The input placeholder|
## Events :
|Name|description|params|
|---------|-------|------|
|blur | Triggered on blur event| `(e:Event)=>{}`|
|focus | Triggered on focus event|`(e:Event)=>{}`|
| click-dropdown | Triggered on open dropdown|`(e:Event,showDropdown:Boolean)=>{}`|
| click-dropdown | Emitted on selecting new country|`(e:Event,country:{name: string,nativeName: string, callCode: number | null, flag: string,code: string})=>{}`|
### Credits :
Thanks to the maintainers of :
- [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js)
- [restcountries](https://restcountries.eu/)
- [ip2c](https://ip2c.org/s)
-
Coded with ❤ by Boussadjra Brahim