@kingscode/vuetify-phone-input

0.2.0 • Public • Published

Vuetify Phone Input

Example

Vuetify Phone Input

Please refer to the TextField if you want to see which inherited props will be available.

Props

Name Type Default
value string ''
countries [] countries
type string tel
placeholder string #
countryCode string-number ''
prependCountryCode boolean true

Events:

Name Return value What
@country string The new selected country code
@phone string Equivalent to @change event, but with additional features. Gets called on blur

Installation

install the dependency

npm i @kingscode/vuetify-phone-input

Then just import the component in the file you need it

import VuetifyPhoneInput from '@kingscode/vuetify-phone-input';

And add it to the components in your vue file

  components: {
    VuetifyPhoneInput,
    ...

Usage

<template>
    <div>
        <VuetifyPhoneInput :countries="countries"
                           @country="onCountry"
                           @phone="onPhone"/>
    </div>
</template>

<script lang="js">
import VuetifyPhoneInput from '@kingscode/vuetify-phone-input';

export default {
    name: 'Home',
    components: {
        VuetifyPhoneInput
    },
    computed: {
        countries: () => [ // we can now provide our own list of countries + codes. Defaults to all possible countries.
            {
                code: 31,
                name: 'NL',
            },
            {
                code: 32,
                name: 'BE',
            },
        ],
    },
    methods: {
        onCountry(country) { // callback when the consumer changed the country code.
            console.log(country); // 32
        },
        onPhone(phone) { // callback when the consumer changed the phone number
            console.log(phone); // +31612345678
        },
    },
};
</script>

If the consumer enters the following: +32612345678 when the current selected country does not match, the country will be adjusted accordingly.

Remember that this Phone Input is derived from the VTextField from Vuetify, meaning that you can still use the error-messages, or placeholder attributes for example.

Package Sidebar

Install

npm i @kingscode/vuetify-phone-input

Weekly Downloads

194

Version

0.2.0

License

MIT

Unpacked Size

5.93 MB

Total Files

13

Last publish

Collaborators

  • ricardovanlaarhoven