141 lines
6.9 KiB
Vue
141 lines
6.9 KiB
Vue
|
<script>
|
||
|
|
import Layout from "../../layouts/main";
|
||
|
|
import PageHeader from "../../components/page-header";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Form-mask component
|
||
|
|
*/
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
Layout,
|
||
|
|
PageHeader
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: "Form Mask",
|
||
|
|
items: [{
|
||
|
|
text: "Forms",
|
||
|
|
href: "/"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Form Mask",
|
||
|
|
active: true
|
||
|
|
}
|
||
|
|
],
|
||
|
|
digit: "",
|
||
|
|
zipcode: "",
|
||
|
|
crazyzip: "",
|
||
|
|
money: "",
|
||
|
|
date: "",
|
||
|
|
hour: "",
|
||
|
|
datetime: "",
|
||
|
|
ipaddress: "",
|
||
|
|
cnpj: "",
|
||
|
|
cpf: "",
|
||
|
|
celphone: "",
|
||
|
|
ustelephone: "",
|
||
|
|
areacode: "",
|
||
|
|
telephone: ""
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Layout>
|
||
|
|
<PageHeader :title="title" :items="items" />
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-12">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title mb-4">Example</h4>
|
||
|
|
<form>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<div>
|
||
|
|
<div class="form-group mb-4">
|
||
|
|
<label for="input-date1">Date</label>
|
||
|
|
<input v-model="date" v-mask="'##/##/####'" type="text" class="form-control" />
|
||
|
|
<span class="text-muted">e.g "dd/mm/yyyy"</span>
|
||
|
|
</div>
|
||
|
|
<div class="form-group mb-4">
|
||
|
|
<label>Hour</label>
|
||
|
|
<input v-model="hour" v-mask="'##:##:##'" type="text" class="form-control" />
|
||
|
|
<span class="text-muted">e.g "hh:mm:ss"</span>
|
||
|
|
</div>
|
||
|
|
<div class="form-group mb-4">
|
||
|
|
<label>Date & Hour</label>
|
||
|
|
<input v-model="datetime" v-mask="'##/##/#### ##:##:##'" type="text" class="form-control" />
|
||
|
|
<span class="text-muted">e.g "dd/mm/yyyy hh:mm:ss"</span>
|
||
|
|
</div>
|
||
|
|
<div class="form-group mb-4">
|
||
|
|
<label>ZIP Code</label>
|
||
|
|
<input v-model="zipcode" v-mask="'#####-###'" type="text" class="form-control" />
|
||
|
|
<span class="text-muted">e.g "xxxxx-xxx"</span>
|
||
|
|
</div>
|
||
|
|
<div class="form-group mb-4">
|
||
|
|
<label>Crazy Zip Code</label>
|
||
|
|
|
||
|
|
<input v-model="crazyzip" v-mask="'#-##-##-##'" type="text" class="form-control" />
|
||
|
|
<span class="text-muted">e.g "x-xx-xx-xx"</span>
|
||
|
|
</div>
|
||
|
|
<div class="form-group mb-4">
|
||
|
|
<label>Money</label>
|
||
|
|
<input v-model="money" v-mask="
|
||
|
|
'###.###.###.###.###,##'
|
||
|
|
" type="text" class="form-control" />
|
||
|
|
<span class="text-muted">e.g "Your money"</span>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>4 digit Group</label>
|
||
|
|
<input v-model="digit" v-mask="'#,####,####,####'" type="text" class="form-control" />
|
||
|
|
<span class="text-muted">e.g. "x,xxxx,xxxx,xxxx"</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-6">
|
||
|
|
<div class="form-group mb-4">
|
||
|
|
<label>Telephone</label>
|
||
|
|
<input v-model="telephone" v-mask="'####-####'" type="text" class="form-control" />
|
||
|
|
<span class="text-muted">e.g "xxxx-xxxx"</span>
|
||
|
|
</div>
|
||
|
|
<div class="form-group mb-4">
|
||
|
|
<label>Telephone with Code Area</label>
|
||
|
|
<input v-model="areacode" v-mask="'(##) ####-####'" type="text" class="form-control" />
|
||
|
|
<span class="text-muted">e.g "(xx) xxxx-xxxx"</span>
|
||
|
|
</div>
|
||
|
|
<div class="form-group mb-4">
|
||
|
|
<label>US Telephone</label>
|
||
|
|
<input v-model="ustelephone" v-mask="'(###) ###-####'" type="text" class="form-control" />
|
||
|
|
<span class="text-muted">e.g "(xxx) xxx-xxxx"</span>
|
||
|
|
</div>
|
||
|
|
<div class="form-group mb-4">
|
||
|
|
<label>São Paulo Celphones</label>
|
||
|
|
<input v-model="celphone" v-mask="'(##) #####-####'" type="text" class="form-control" />
|
||
|
|
<span class="text-muted">e.g "(xx) xxxxx-xxxx"</span>
|
||
|
|
</div>
|
||
|
|
<div class="form-group mb-4">
|
||
|
|
<label>CPF</label>
|
||
|
|
<input v-model="cpf" v-mask="'###.###.###-##'" type="text" class="form-control" />
|
||
|
|
<span class="text-muted">e.g "xxx.xxx.xxxx-xx"</span>
|
||
|
|
</div>
|
||
|
|
<div class="form-group mb-4">
|
||
|
|
<label>CNPJ</label>
|
||
|
|
<input v-model="cnpj" v-mask="'##.###.###/####-##'" type="text" class="form-control" />
|
||
|
|
<span class="text-muted">e.g "xx.xxx.xxx/xxxx-xx"</span>
|
||
|
|
</div>
|
||
|
|
<div class="form-group mb-4">
|
||
|
|
<label>IP Address</label>
|
||
|
|
<input v-model="ipaddress" v-mask="'###.###.###.###'" type="text" class="form-control" />
|
||
|
|
<span class="text-muted">e.g "xxx.xxx.xxx.xxx"</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Layout>
|
||
|
|
</template>
|