Skip to content

Instantly share code, notes, and snippets.

@azaars
Created October 18, 2017 19:57
Show Gist options
  • Save azaars/00eef2afe9551b215ce960f5807fc6d4 to your computer and use it in GitHub Desktop.
Save azaars/00eef2afe9551b215ce960f5807fc6d4 to your computer and use it in GitHub Desktop.
<template>
<v-content>
<v-text-field :clearable="true" v-model="input" v-bind="getMask">
</v-text-field>
{{ input }} &nbsp; {{ type }}
</v-content>
</template>
<script>
import phoneMask from 'assets/libphonenumber-formatter' // npm libphonenumber-js
export default {
data() {
return {
maskCase1: 'phone', // Existing
maskCase2: 'numeral', // New: Format numeral
maskCase3: { // New: Format numeral with custom options
prefix: 'MYR$ ',
suffix: ' cent',
positiveOnly: false,
// positiveSign: true,
precision: 2,
decimal: '.',
// blockSeparator: ' ', // String
blockSeparator: [',', ' '], // Array
// blockSize: 3, // String
blockSize: [2, 3], // Array
formatter: 'numeral'
},
maskCase4: '####', // Existing, custom
maskCase5: phoneMask, // External lib
input: null, // {String,Number}
type: null, // typeof
withMask: true // Toggle with/without mask
}
},
computed: {
getMask () {
return this.withMask ? { mask: this.maskAuPhone } : {}
},
maskAuPhone () { // There are three common formats for AU phone numbers
if (!this.input) return ''
return this.input.length > 1 && this.input.startsWith('0')
? this.input.startsWith('04')
? '#### ### ###' // Mobile
: '(##) #### ####' // With area code
: '#### ####' // Local number
}
},
mounted () {
this.callback()
},
methods: {
callback () { // Post-render action
window.setTimeout(() => {
this.type = typeof this.input
// this.input = '12.g3' // External - attempt a correction
this.withMask = false
}, 10000)
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment