From 64175e70b69f852df6addf86234470daee1bfb29 Mon Sep 17 00:00:00 2001
From: cyrilf <cyrilf7x@gmail.com>
Date: Fri, 18 Mar 2022 22:10:00 +0100
Subject: [PATCH] doc: add example for advanced directive usage
The directive can be used with an `object` rather than a `string`
---
src/docs/docs.vue | 25 ++++++++++++++++++++++++-
1 file changed, 24 insertions(+), 1 deletion(-)
diff --git a/src/docs/docs.vue b/src/docs/docs.vue
index bac930e8..509aa883 100644
--- a/src/docs/docs.vue
+++ b/src/docs/docs.vue
@@ -167,6 +167,11 @@
<input type="tel" placeholder="dd/mm/yyyy" />
</div>
<pre>{{directive}}</pre>
+
+ <div class="field" v-mask="directiveMask">
+ <input type="tel" placeholder="987 BC" />
+ </div>
+ <pre>{{directiveAdvanced}}</pre>
<div class="ui tertiary inverted red segment">
The value returned from directive is always masked!
@@ -201,7 +206,25 @@ export default {
placeholder: 'test your mask here',
mask: '#XSAa',
value: '12TgB',
- directive: `<input type="tel" v-mask="'##/##/####'" />`
+ directive: `<input type="tel" v-mask="'##/##/####'" />`,
+ directiveMask: {
+ mask: "### YY",
+ tokens: {
+ Y: {
+ pattern: /[0-9A-C]/,
+ },
+ "#": { pattern: /\d/ },
+ },
+ }
+ directiveAdvanced: `<input type="tel" v-mask="{
+ mask: "### YY",
+ tokens: {
+ Y: {
+ pattern: /[0-9A-C]/,
+ },
+ "#": { pattern: /\d/ },
+ },
+ }" />`
}
},
computed: {