Vue.js filter for phone formatting with E.164 support
Includes:
- Filter
- Global method
- Directive
NPM
npm install --save vue-e164CDN
<script src="//unpkg.com/vue-e164/dist/vue-e164.js"></script>import e164 from 'vue-164'
const options = {
plus: true,
brackets: false,
space: false,
dash: false,
areaCode: true
}
Vue.use(e164, 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
}
| 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 |
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: {
applyFilter (phoneInput) {
return this.$filterPhone(phoneInput, {
plus: true,
brackets: false,
space: false,
dash: false,
areaCode: true
})
}
}
...
/* Or as computed property */
...
data () {
return {
phone: '70005555555'
}
},
computed: {
filteredPhone () {
return this.$filterPhone(this.phone, {
plus: true,
brackets: false,
space: false,
dash: false,
areaCode: true
})
}
}
...npm run build
npm run testCopyright (c) 2018-2020 Stanislav Mihaylov