No documentation on how to use custom tokens with directive

[Vlaoff]

Hi

I could not find how to use custom tokens with the directive.

Edit: Watching how its done in the component I figured it out, but adding it to the documentation could save time to others in the future.

You just need to pass an object to the v-mask

<input type="tel" v-mask="{mask: '+7 (F##) ###-##-##', tokens: hexTokens}" v-model="phone"/>

You could also define it as an object

data () {
    customMask: {
      mask: '+7 (F##) ###-##-##',
      tokens: 
        'F': {
          pattern: /(?!8)\d/
        },
        '#': {pattern: /\d/}
      }
    }
  }
<input type="tel" v-mask="customMask" v-model="phone"/>

[ankology]

If you need to use a existing token, is required to pass again with your custom tokens.

[marcosrocha85]

I spent a lot of time until reach here. Despite this project is widely be used, it should be merged and have a proper attention.

Anyway, @Vlaoff or @ankology . Can you show me a more detailed example how did you done? I'm using ES5 and didn't manage to make custom mask work. I need letters to be uppercased when typed.

var app = new Vue({
    el: "#my_application",
    data: {
        customTokens: {
            mask: 'CCCCC',
            tokens: {
                'C': {
                    pattern: /[0-9a-zA-Z]/,
                    transform: function(v) {
                        return v.toLocaleUpperCase();
                    }
                }
            }
        },
    }
});

<input v-mask="customTokens" v-model="license_plate"/>

[ankology]

I didn't run the code, @marcosrocha85 but your input is type="tel" maybe is it the issue? The rest looks ok.

[marcosrocha85]

Thank you for your reply. Actually the type="tel" was a typo. But I solved by doing 'AAA-#X##' at v-mask property and converting to UpperCase at server so I can type ABC-1234 and ABC-1T34 which are two possible license plates of Southern Common Market.

[vlad909]

@marcosrocha85 but this example doesn't work :D

[marcosrocha85]

@vlad909 It was my attempt and stuck at that kind of "code". Anyway, thank you guys for your attention.

[kennerus]

I had same problem as you. Needed to add custom regexp. So here is my solution for custom tokens: https://codesandbox.io/s/7mw8x06pv1?fontsize=14

I first added just one token and it was like:

data() {
    return {
      customTokens: {
        'Y': {pattern: /[0-9]/}
      },
    }
  }

But it owerrites the-mask tokens, so i needed to add to ":tokens" all tokens that i want to use (just copied from source code all tokens).

[huynhquangminh]

I spent a lot of time until reach here. Despite this project is widely be used, it should be merged and have a proper attention.

Anyway, @Vlaoff or @ankology . Can you show me a more detailed example how did you done? I'm using ES5 and didn't manage to make custom mask work. I need letters to be uppercased when typed.

var app = new Vue({
    el: "#my_application",
    data: {
        customTokens: {
            mask: 'CCCCC',
            tokens: {
                'C': {
                    pattern: /[0-9a-zA-Z]/,
                    transform: function(v) {
                        return v.toLocaleUpperCase();
                    }
                }
            }
        },
    }
});

<input v-mask="customTokens" v-model="license_plate"/>

It is run with this code