Fixed #26 - New Component: InputMask
mertsincan
parent
1ba1cb148e
commit
6cf1b01de7
|
|
@ -0,0 +1,490 @@
|
|||
<template>
|
||||
<input ref="input" :class="inputClass" v-on="listeners" :value="value" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DomHandler from '../utils/DomHandler';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: null,
|
||||
slotChar: {
|
||||
type: String,
|
||||
default: '_'
|
||||
},
|
||||
mask: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
autoClear: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
unmask: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
caret(first, last) {
|
||||
let range, begin, end;
|
||||
|
||||
if (!this.$refs.input.offsetParent || this.$refs.input !== document.activeElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof first === 'number') {
|
||||
begin = first;
|
||||
end = (typeof last === 'number') ? last : begin;
|
||||
if (this.$refs.input.setSelectionRange) {
|
||||
this.$refs.input.setSelectionRange(begin, end);
|
||||
}
|
||||
else if (this.$refs.input['createTextRange']) {
|
||||
range = this.$refs.input['createTextRange']();
|
||||
range.collapse(true);
|
||||
range.moveEnd('character', end);
|
||||
range.moveStart('character', begin);
|
||||
range.select();
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (this.$refs.input.setSelectionRange) {
|
||||
begin = this.$refs.input.selectionStart;
|
||||
end = this.$refs.input.selectionEnd;
|
||||
}
|
||||
else if (document['selection'] && document['selection'].createRange) {
|
||||
range = document['selection'].createRange();
|
||||
begin = 0 - range.duplicate().moveStart('character', -100000);
|
||||
end = begin + range.text.length;
|
||||
}
|
||||
|
||||
return { begin: begin, end: end };
|
||||
}
|
||||
},
|
||||
isCompleted() {
|
||||
for (let i = this.firstNonMaskPos; i <= this.lastRequiredNonMaskPos; i++) {
|
||||
if (this.tests[i] && this.buffer[i] === this.getPlaceholder(i)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
getPlaceholder(i) {
|
||||
if (i < this.slotChar.length) {
|
||||
return this.slotChar.charAt(i);
|
||||
}
|
||||
return this.slotChar.charAt(0);
|
||||
},
|
||||
seekNext(pos) {
|
||||
while (++pos < this.len && !this.tests[pos]);
|
||||
return pos;
|
||||
},
|
||||
seekPrev(pos) {
|
||||
while (--pos >= 0 && !this.tests[pos]);
|
||||
return pos;
|
||||
},
|
||||
shiftL(begin, end) {
|
||||
let i, j;
|
||||
|
||||
if (begin < 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (i = begin, j = this.seekNext(end); i < this.len; i++) {
|
||||
if (this.tests[i]) {
|
||||
if (j < this.len && this.tests[i].test(this.buffer[j])) {
|
||||
this.buffer[i] = this.buffer[j];
|
||||
this.buffer[j] = this.getPlaceholder(j);
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
|
||||
j = this.seekNext(j);
|
||||
}
|
||||
}
|
||||
this.writeBuffer();
|
||||
this.caret(Math.max(this.firstNonMaskPos, begin));
|
||||
},
|
||||
shiftR(pos) {
|
||||
let i, c, j, t;
|
||||
|
||||
for (i = pos, c = this.getPlaceholder(pos); i < this.len; i++) {
|
||||
if (this.tests[i]) {
|
||||
j = this.seekNext(i);
|
||||
t = this.buffer[i];
|
||||
this.buffer[i] = c;
|
||||
if (j < this.len && this.tests[j].test(t)) {
|
||||
c = t;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
handleAndroidInput(event) {
|
||||
var curVal = this.$refs.input.value;
|
||||
var pos = this.caret();
|
||||
if (this.oldVal && this.oldVal.length && this.oldVal.length > curVal.length) {
|
||||
// a deletion or backspace happened
|
||||
this.checkVal(true);
|
||||
while (pos.begin > 0 && !this.tests[pos.begin - 1])
|
||||
pos.begin--;
|
||||
if (pos.begin === 0) {
|
||||
while (pos.begin < this.firstNonMaskPos && !this.tests[pos.begin])
|
||||
pos.begin++;
|
||||
}
|
||||
this.caret(pos.begin, pos.begin);
|
||||
} else {
|
||||
this.checkVal(true);
|
||||
while (pos.begin < this.len && !this.tests[pos.begin])
|
||||
pos.begin++;
|
||||
|
||||
this.caret(pos.begin, pos.begin);
|
||||
}
|
||||
|
||||
if (this.isCompleted()) {
|
||||
this.$emit('complete', event);
|
||||
}
|
||||
},
|
||||
clearBuffer(start, end) {
|
||||
let i;
|
||||
for (i = start; i < end && i < this.len; i++) {
|
||||
if (this.tests[i]) {
|
||||
this.buffer[i] = this.getPlaceholder(i);
|
||||
}
|
||||
}
|
||||
},
|
||||
writeBuffer() {
|
||||
this.$refs.input.value = this.buffer.join('');
|
||||
},
|
||||
checkVal(allow) {
|
||||
this.isValueChecked = true;
|
||||
//try to place characters where they belong
|
||||
let test = this.$refs.input.value,
|
||||
lastMatch = -1,
|
||||
i,
|
||||
c,
|
||||
pos;
|
||||
|
||||
for (i = 0, pos = 0; i < this.len; i++) {
|
||||
if (this.tests[i]) {
|
||||
this.buffer[i] = this.getPlaceholder(i);
|
||||
while (pos++ < test.length) {
|
||||
c = test.charAt(pos - 1);
|
||||
if (this.tests[i].test(c)) {
|
||||
this.buffer[i] = c;
|
||||
lastMatch = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (pos > test.length) {
|
||||
this.clearBuffer(i + 1, this.len);
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
if (this.buffer[i] === test.charAt(pos)) {
|
||||
pos++;
|
||||
}
|
||||
if (i < this.partialPosition) {
|
||||
lastMatch = i;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (allow) {
|
||||
this.writeBuffer();
|
||||
} else if (lastMatch + 1 < this.partialPosition) {
|
||||
if (this.autoClear || this.buffer.join('') === this.defaultBuffer) {
|
||||
// Invalid value. Remove it and replace it with the
|
||||
// mask, which is the default behavior.
|
||||
if (this.$refs.input.value) this.$refs.input.value = '';
|
||||
this.clearBuffer(0, this.len);
|
||||
} else {
|
||||
// Invalid value, but we opt to show the value to the
|
||||
// user and allow them to correct their mistake.
|
||||
this.writeBuffer();
|
||||
}
|
||||
} else {
|
||||
this.writeBuffer();
|
||||
this.$refs.input.value = this.$refs.input.value.substring(0, lastMatch + 1);
|
||||
}
|
||||
return (this.partialPosition ? i : this.firstNonMaskPos);
|
||||
},
|
||||
handleInputChange(event) {
|
||||
if (this.$attrs.readonly) {
|
||||
return;
|
||||
}
|
||||
|
||||
var pos = this.checkVal(true);
|
||||
this.caret(pos);
|
||||
this.updateModel(event);
|
||||
|
||||
if (this.isCompleted()) {
|
||||
this.$emit('complete', event);
|
||||
}
|
||||
},
|
||||
getUnmaskedValue() {
|
||||
let unmaskedBuffer = [];
|
||||
for (let i = 0; i < this.buffer.length; i++) {
|
||||
let c = this.buffer[i];
|
||||
if (this.tests[i] && c !== this.getPlaceholder(i)) {
|
||||
unmaskedBuffer.push(c);
|
||||
}
|
||||
}
|
||||
|
||||
return unmaskedBuffer.join('');
|
||||
},
|
||||
updateModel(e) {
|
||||
let val = this.unmask ? this.getUnmaskedValue() : e.target.value;
|
||||
this.$emit('input', (this.defaultBuffer !== val) ? val : '');
|
||||
},
|
||||
updateValue() {
|
||||
if (this.$refs.input) {
|
||||
if (this.value == null) {
|
||||
this.$refs.input.value = '';
|
||||
}
|
||||
else {
|
||||
this.$refs.input.value = this.value;
|
||||
this.checkVal();
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
if(this.$refs.input) {
|
||||
this.writeBuffer();
|
||||
this.checkVal();
|
||||
|
||||
let val = this.unmask ? this.getUnmaskedValue() : this.$refs.input.value;
|
||||
this.$emit('input', (this.defaultBuffer !== val) ? val : '');
|
||||
}
|
||||
}, 10);
|
||||
|
||||
this.focusText = this.$refs.input.value;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.tests = [];
|
||||
this.partialPosition = this.mask.length;
|
||||
this.len = this.mask.length;
|
||||
this.firstNonMaskPos = null;
|
||||
this.defs = {
|
||||
'9': '[0-9]',
|
||||
'a': '[A-Za-z]',
|
||||
'*': '[A-Za-z0-9]'
|
||||
};
|
||||
|
||||
let ua = DomHandler.getUserAgent();
|
||||
this.androidChrome = /chrome/i.test(ua) && /android/i.test(ua);
|
||||
|
||||
let maskTokens = this.mask.split('');
|
||||
for (let i = 0; i < maskTokens.length; i++) {
|
||||
let c = maskTokens[i];
|
||||
if (c === '?') {
|
||||
this.len--;
|
||||
this.partialPosition = i;
|
||||
}
|
||||
else if (this.defs[c]) {
|
||||
this.tests.push(new RegExp(this.defs[c]));
|
||||
if (this.firstNonMaskPos === null) {
|
||||
this.firstNonMaskPos = this.tests.length - 1;
|
||||
}
|
||||
if (i < this.partialPosition) {
|
||||
this.lastRequiredNonMaskPos = this.tests.length - 1;
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.tests.push(null);
|
||||
}
|
||||
}
|
||||
|
||||
this.buffer = [];
|
||||
for (let i = 0; i < maskTokens.length; i++) {
|
||||
let c = maskTokens[i];
|
||||
if (c !== '?') {
|
||||
if (this.defs[c])
|
||||
this.buffer.push(this.getPlaceholder(i));
|
||||
else
|
||||
this.buffer.push(c);
|
||||
}
|
||||
}
|
||||
this.defaultBuffer = this.buffer.join('');
|
||||
this.updateValue();
|
||||
},
|
||||
watch: {
|
||||
value(newValue, oldValue) {
|
||||
if (oldValue && oldValue !== newValue && this.$refs.input.value !== newValue) {
|
||||
this.updateValue();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
listeners() {
|
||||
let $vm = this;
|
||||
|
||||
return {
|
||||
...$vm.$listeners,
|
||||
input: event => {
|
||||
if ($vm.androidChrome)
|
||||
$vm.handleAndroidInput(event);
|
||||
else
|
||||
$vm.handleInputChange(event);
|
||||
|
||||
$vm.$emit('input', event.target.value);
|
||||
},
|
||||
focus: event => {
|
||||
if ($vm.$attrs.readonly) {
|
||||
return;
|
||||
}
|
||||
|
||||
$vm.focus = true;
|
||||
|
||||
clearTimeout($vm.caretTimeoutId);
|
||||
let pos;
|
||||
|
||||
$vm.focusText = $vm.$refs.input.value;
|
||||
|
||||
pos = $vm.checkVal();
|
||||
|
||||
$vm.caretTimeoutId = setTimeout(() => {
|
||||
if ($vm.$refs.input !== document.activeElement) {
|
||||
return;
|
||||
}
|
||||
$vm.writeBuffer();
|
||||
if (pos === $vm.mask.replace("?", "").length) {
|
||||
$vm.caret(0, pos);
|
||||
} else {
|
||||
$vm.caret(pos);
|
||||
}
|
||||
}, 10);
|
||||
|
||||
$vm.$emit('focus', event)
|
||||
},
|
||||
blur: event => {
|
||||
$vm.focus = false;
|
||||
$vm.checkVal();
|
||||
$vm.updateModel(event);
|
||||
|
||||
if ($vm.$refs.input.value !== $vm.focusText) {
|
||||
let e = document.createEvent('HTMLEvents');
|
||||
e.initEvent('change', true, false);
|
||||
$vm.$refs.input.dispatchEvent(e);
|
||||
}
|
||||
|
||||
$vm.$emit('blur', event);
|
||||
},
|
||||
keydown: event => {
|
||||
if ($vm.$attrs.readonly) {
|
||||
return;
|
||||
}
|
||||
|
||||
let k = event.which || event.keyCode,
|
||||
pos,
|
||||
begin,
|
||||
end;
|
||||
let iPhone = /iphone/i.test(DomHandler.getUserAgent());
|
||||
$vm.oldVal = $vm.$refs.input.value;
|
||||
|
||||
//backspace, delete, and escape get special treatment
|
||||
if (k === 8 || k === 46 || (iPhone && k === 127)) {
|
||||
pos = $vm.caret();
|
||||
begin = pos.begin;
|
||||
end = pos.end;
|
||||
|
||||
|
||||
if (end - begin === 0) {
|
||||
begin = k !== 46 ? $vm.seekPrev(begin) : (end = $vm.seekNext(begin - 1));
|
||||
end = k === 46 ? $vm.seekNext(end) : end;
|
||||
}
|
||||
|
||||
$vm.clearBuffer(begin, end);
|
||||
$vm.shiftL(begin, end - 1);
|
||||
$vm.updateModel(event);
|
||||
|
||||
event.preventDefault();
|
||||
} else if (k === 13) { // enter
|
||||
$vm.onBlur(event);
|
||||
$vm.updateModel(event);
|
||||
} else if (k === 27) { // escape
|
||||
$vm.$refs.input.value = $vm.focusText;
|
||||
$vm.caret(0, $vm.checkVal());
|
||||
$vm.updateModel(event);
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
$vm.$emit('keydown', event);
|
||||
},
|
||||
keypress: event => {
|
||||
if ($vm.$attrs.readonly) {
|
||||
return;
|
||||
}
|
||||
|
||||
var k = event.which || event.keyCode,
|
||||
pos = $vm.caret(),
|
||||
p,
|
||||
c,
|
||||
next,
|
||||
completed;
|
||||
|
||||
if (event.ctrlKey || event.altKey || event.metaKey || k < 32) {//Ignore
|
||||
return;
|
||||
} else if (k && k !== 13) {
|
||||
if (pos.end - pos.begin !== 0) {
|
||||
$vm.clearBuffer(pos.begin, pos.end);
|
||||
$vm.shiftL(pos.begin, pos.end - 1);
|
||||
}
|
||||
|
||||
p = $vm.seekNext(pos.begin - 1);
|
||||
if (p < $vm.len) {
|
||||
c = String.fromCharCode(k);
|
||||
if ($vm.tests[p].test(c)) {
|
||||
$vm.shiftR(p);
|
||||
|
||||
$vm.buffer[p] = c;
|
||||
$vm.writeBuffer();
|
||||
next = $vm.seekNext(p);
|
||||
|
||||
if (/android/i.test(DomHandler.getUserAgent())) {
|
||||
//Path for CSP Violation on FireFox OS 1.1
|
||||
let proxy = () => {
|
||||
$vm.caret(next);
|
||||
};
|
||||
|
||||
setTimeout(proxy, 0);
|
||||
} else {
|
||||
$vm.caret(next);
|
||||
}
|
||||
if (pos.begin <= $vm.lastRequiredNonMaskPos) {
|
||||
completed = $vm.isCompleted();
|
||||
}
|
||||
}
|
||||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
$vm.updateModel(event);
|
||||
|
||||
if (completed) {
|
||||
$vm.$emit('complete', event);
|
||||
}
|
||||
|
||||
$vm.$emit('keypress', event);
|
||||
},
|
||||
paste: event => {
|
||||
$vm.handleInputChange(event);
|
||||
|
||||
$vm.$emit('paste', event);
|
||||
}
|
||||
};
|
||||
},
|
||||
filled() {
|
||||
return (this.value != null && this.value.toString().length > 0)
|
||||
},
|
||||
inputClass() {
|
||||
return ['p-inputmask p-inputtext p-component', {
|
||||
'p-filled': this.filled,
|
||||
'p-disabled': this.$attrs.disabled
|
||||
}];
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>InputMask</h1>
|
||||
<p>InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Basic {{val1}}</h3>
|
||||
<InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>SSN {{val2}}</h3>
|
||||
<InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Date {{val3}}</h3>
|
||||
<InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Phone {{val4}}</h3>
|
||||
<InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Phone Ext {{val5}}</h3>
|
||||
<InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Serial Number {{val6}}</h3>
|
||||
<InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InputMaskDoc />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InputMaskDoc from './InputMaskDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
val1: null,
|
||||
val2: null,
|
||||
val3: null,
|
||||
val4: null,
|
||||
val5: null,
|
||||
val6: null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'InputMaskDoc': InputMaskDoc
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h3>Import</h3>
|
||||
<CodeHighlight lang="javascript">
|
||||
import InputMask from 'primevue/inputmask';
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Getting Started</h3>
|
||||
<p>A model can be bound using the standard v-model directive.</p>
|
||||
<CodeHighlight>
|
||||
<InputMask v-model="value" mask="99-999999" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Mask</h3>
|
||||
<p>Mask format can be a combination of the the following built-in definitions.</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
a - Alpha character (A-Z,a-z)
|
||||
</li>
|
||||
<li>
|
||||
9 - Numeric character (0-9)
|
||||
</li>
|
||||
<li>
|
||||
* - Alpha numberic character (A-Z,a-z,0-9)
|
||||
</li>
|
||||
</ul>
|
||||
<CodeHighlight>
|
||||
<InputMask v-model="value" mask="a*-999-a999" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>SlotChar</h3>
|
||||
<p>Underscore is the default placeholder for a mask and this can be customized using <i>slotChart</i> option.</p>
|
||||
<CodeHighlight>
|
||||
<InputMask v-model="value" mask="99/99/9999" slotChar="mm/dd/yyyy" />
|
||||
</CodeHighlight>
|
||||
<h3>Optional Values</h3>
|
||||
<p>If the input does not complete the mask definition, it is cleared by default.
|
||||
Use <i>autoClear</i> property to control this behavior. In addition, certain part of
|
||||
a mask can be made optional by using ? symbol where anything after the question
|
||||
mark becomes optional.</p>
|
||||
<CodeHighlight>
|
||||
<InputMask v-model="value" mask="(999) 999-9999? x99999" />
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
<p>InputText passes any valid attribute to the underlying input element. In addition;</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>mask</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Mask pattern.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>slotChar</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
<td>Placeholder character in mask, default is underscore.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>autoClear</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Clears the incomplete value on blur.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>unmask</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Defines if model sets the raw unmasked value to bound value or the formatted mask value.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Styling</h3>
|
||||
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-inputmask p-inputtext</td>
|
||||
<td>Input element</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Dependencies</h3>
|
||||
<p>None.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Basic {{val1}}</h3>
|
||||
<InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>SSN {{val2}}</h3>
|
||||
<InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Date {{val3}}</h3>
|
||||
<InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Phone {{val4}}</h3>
|
||||
<InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Phone Ext {{val5}}</h3>
|
||||
<InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<h3>Serial Number {{val6}}</h3>
|
||||
<InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
val1: null,
|
||||
val2: null,
|
||||
val3: null,
|
||||
val4: null,
|
||||
val5: null,
|
||||
val6: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue