2
0
mirror of https://github.com/tenrok/maska.git synced 2026-06-14 18:42:27 +03:00

Add mask raw value attribute and @mask event

This commit is contained in:
Alexander Shabunevich
2021-02-06 20:10:51 +03:00
parent 75fb1638ba
commit 99013bd69d
10 changed files with 48 additions and 24 deletions
+10 -3
View File
@@ -23,9 +23,9 @@
<div class="box">
<form id="vue-form">
<div class="field">
<label class="label">Phone with code: {{ phone }}</label>
<label class="label">Phone with code: {{ phone }} (raw value: {{ phoneRaw }})</label>
<div class="control">
<input v-maska="['+1 (###) ##-##-##', '+1 (###) ###-##-##']" class="input" type="tel" autocomplete="tel" v-model="phone">
<input v-maska="['+1 (###) ##-##-##', '+1 (###) ###-##-##']" class="input" type="tel" autocomplete="tel" v-model="phone" @maska="onMaska">
</div>
<p class="help is-family-code">v-maska="['+1 (###) ##-##-##', '+1 (###) ###-##-##']"</p>
</div>
@@ -148,13 +148,14 @@
</section>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/maska@1.3.2/dist/maska.js"></script>
<script src="https://cdn.jsdelivr.net/npm/maska@1.4.0/dist/maska.js"></script>
<script>
// vue
new Vue({
el: '#vue-form',
data: {
phone: '19992345678',
phoneRaw: '',
dotFormat: false,
color: null,
customMask: '#*'
@@ -164,6 +165,12 @@
dateMask: function() {
return this.dotFormat ? '##.##.####' : '##/##/####'
}
},
methods: {
onMaska: function(event) {
this.phoneRaw = event.target.dataset.maskRawValue
}
}
});