vue-e164
Vue.js filter for phone formatting with E.164 support
Includes:
- Filter
- Global method
- Directive
Setup
NPM
npm install --save vue-e164
CDN
const options = plus: true brackets: false space: false dash: false areaCode: true Vue
Options
plus {Boolean} - add plus symbol before area code
brackets {Boolean} - add brackets
space {Boolean} - split number by space
dash {Boolean} - split number by dash
areaCode {Boolean} - set to false to exclude area code and plus
If you want to use E.164 standart, you need this options:
{
plus: true,
brackets: false,
space: false,
dash: false,
areaCode: true
}
Examples
plus | brackets | space | dash | areaCode | Result |
---|---|---|---|---|---|
true | true | true | false | true | +1 (495) 000 99 88 |
false | false | false | false | true | 14950009988 |
true | false | false | false | true | +14950009988 (E.164) |
true | true | false | false | true | +1(495)0009988 |
false | true | true | false | true | 1 (495) 000 99 88 |
false | false | true | false | true | 1 495 000 99 88 |
false | true | false | false | true | 1(495)0009988 |
true | false | true | false | true | +1 495 000 99 88 |
true | true | true | true | true | +1 (495) 000 - 99 - 88 |
true | true | false | true | true | +1(495)000-99-88 |
true | false | true | true | true | +1 495 000 - 99 - 88 |
false | true | true | true | true | 1 (495) 000 - 99 - 88 |
true | false | true | true | true | +1 495 000 - 99 - 88 |
true | true | true | true | false | (495) 000 - 99 - 88 |
true | true | false | true | false | (495)000-99-88 |
true | false | true | true | false | 495 000 - 99 - 88 |
false | true | true | true | false | (495) 000 - 99 - 88 |
true | false | true | true | false | 495 000 - 99 - 88 |
Usage
vue-e164 adds phone
filter, and can be used as any other vue.js filter.
<template>
<p>{{ string | phone }}</p>
</template>
If you need to use different options for each element, from v0.0.2
you can use directive v-phone
:
<template>
<p v-phone="{ plus: true, brackets: false, space: false, dash: false, areaCode: true }">{{ string }}</p>
</template>
From v1.2.0
you can use global function $filterPhone
:
...methods: { return this } .../* Or as computed property */... { return phone: '70005555555' }computed: { return this }...
Test
npm run buildnpm run test
License
Copyright (c) 2018-2020 Stanislav Mihaylov