Como posso destacar numero com o DDD (11) na tabela em cor azul
16/04/2022
0
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Agênda de Contatos</title>
</head>
<style>
form {
max-width: 600px;
margin: 0 auto;
font-family: 'Open Sans', sans-serif;
font-weight: weight;
font-style: normal;
padding: 10px;
}
fieldset {
border: none;
font-weight: normal;
}
input[type="text"],
input[type="email"],
textarea {
box-sizing: border-box;
outline: none;
display: block;
color: #333333;
width: 100%;
padding: 7px;
border: none;
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
font-family: inherit;
font-size: 18px;
height: 45px;
}
textarea {
height: 200px;
}
fieldset ul li {
display: block;
font-size: 14px;
color: #f04242;
padding-bottom: 10px;
}
button [type="submit"] {
display: block;
padding: 19px 39px 18px 39px;
color: #ffffff;
background: #1abc9c;
font-size: 18px;
width: 100%;
border: 1px solid #16a085;
border-width: 1px 1px 3px;
margin-top: 50px;
margin-bottom: 10px;
cursor: pointer;
transition: all .3s;
outline: none;
}
input:required:invalid {
border-color: #ff0000;
}
</style>
<body>
<div id="app">
<v-app id="inspire">
<v-data-table :headers="headers" :items="desserts" class="elevation-2">
<template v-slot:top>
<v-toolbar flat>
<v-toolbar-title>Agênda de Contatos</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark class="mb-2" v-bind="attrs" v-on="on">
Adicionar </v-btn>
</template>
<v-card>
<v-card-title>
<span class="modal-title">{{ formTitle }}</span>
</v-card-title>
<!--modal-->
<v-card-text>
<v-container>
<v-row>
<fieldset>
<!-- Formulario do modal -->
<form @submit.prevent="save" id="table" novalidate="true">
<!-- @submit.prevent executa uma ação -->
<p v-if="errors.length">
<b>Corrija os seguintes erros:</b>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</p>
<p>
<label for="name">Nome</label>
<input id="name" v-model="editedItem.name" type="text" name="name" required>
</p>
<p>
<label for="phone">Telefone</label>
<input id="phone" v-model="editedItem.phone" v-mask="'(##) #####-####'" type="text"
name="phone" required>
<!--<span>{{ '9999999999' | VMask('(##) ###-####') }}</span>-->
</p>
</form>
</fieldset>
</v-row>
</v-container>
</v-card-text>
<!-- Botoes Modal -->
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="red darken-2" text @click="close"> Cancelar </v-btn>
<v-btn :disabled="isAddButtonDisabled" color="blue darken-1" text @click="save" type="submit"> Salvar
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- Modal de Exclusão-->
<v-dialog v-model="dialogDelete" max-width="500px">
<v-card>
<v-card-title class="text-h5">Deseja realmente apaga esse campo ?</v-card-title>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="closeDelete()">Cancel</v-btn>
<v-btn large color="error" color="blue darken-1" text @click="deleteItemConfirm">OK</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:item.actions="{ item }">
<v-icon fab dark large color="primary" small class="mr-2" @click="editItem(item)">mdi-pencil</v-icon>
<v-icon large color="error" small @click="deleteItem(item)">mdi-delete</v-icon>
</template>
</v-data-table>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
//Array para armazenar todos os valores da coluna
const app = new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
errors: [],
name: null,
phone: null,
dialog: false,
dialogDelete: false,
headers: [
{
text: 'Nome',
align: 'start',
value: 'name',
},
{
text: 'Telefone',
value: 'phone'
},
{
text: 'Ação',
value: 'actions',
sortable: false
},
],
desserts: [],
editedIndex: -1,
editedItem: {name: 'matheus chimendes', phone: '(11) 90999-9987'}
}),
computed: {
isAddButtonDisabled() {
// validação de bloqueio do salve
const validName = false
return !(this.editedItem.name && this.editedItem.phone);
},
formTitle() {
return this.editedIndex === -1 ? 'Novo Contato' : 'Editar Contato'
}
},
methods: {
checkForm: function () { // validador de campos nome e telefone
this.errors = [];
if (!this.editedItem.name) {
this.errors.push("Nome e Sobrenome Obrigatório !");
} else if (!this.validName(this.editedItem.name)) {
this.errors.push('Nome e Sobrenome deverá ter no minímo 3 letras cada');
}
if (!this.editedItem.phone) {
this.errors.push('Telefone obrigatório!');
} else if (!this.validPhone(this.editedItem.phone)) {
this.errors.push('Telefone deverá conter (##) #####-####');
}
if (this.errors.length > 0) { //se o erro for menor que 0 deixar salvar, se não retorna ERRO!
return false;
}
return true;
},
// validaçao com o regex
validName: function (name) {
const regex = /\b[A-Za-zÀ-ú][A-Za-zÀ-ú]+,?\s[A-Za-zÀ-ú][A-Za-zÀ-ú]{2,19}\b/gi;
return regex.test(name);
},
validPhone: function (phone) {
const regex = /^\(\d\) \d{4,5}-\d$/gi;
return regex.test(
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Agênda de Contatos</title>
</head>
<style>
form {
max-width: 600px;
margin: 0 auto;
font-family: 'Open Sans', sans-serif;
font-weight: weight;
font-style: normal;
padding: 10px;
}
fieldset {
border: none;
font-weight: normal;
}
input[type="text"],
input[type="email"],
textarea {
box-sizing: border-box;
outline: none;
display: block;
color: #333333;
width: 100%;
padding: 7px;
border: none;
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
font-family: inherit;
font-size: 18px;
height: 45px;
}
textarea {
height: 200px;
}
fieldset ul li {
display: block;
font-size: 14px;
color: #f04242;
padding-bottom: 10px;
}
button [type="submit"] {
display: block;
padding: 19px 39px 18px 39px;
color: #ffffff;
background: #1abc9c;
font-size: 18px;
width: 100%;
border: 1px solid #16a085;
border-width: 1px 1px 3px;
margin-top: 50px;
margin-bottom: 10px;
cursor: pointer;
transition: all .3s;
outline: none;
}
input:required:invalid {
border-color: #ff0000;
}
</style>
<body>
<div id="app">
<v-app id="inspire">
<v-data-table :headers="headers" :items="desserts" class="elevation-2">
<template v-slot:top>
<v-toolbar flat>
<v-toolbar-title>Agênda de Contatos</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark class="mb-2" v-bind="attrs" v-on="on">
Adicionar </v-btn>
</template>
<v-card>
<v-card-title>
<span class="modal-title">{{ formTitle }}</span>
</v-card-title>
<!--modal-->
<v-card-text>
<v-container>
<v-row>
<fieldset>
<!-- Formulario do modal -->
<form @submit.prevent="save" id="table" novalidate="true">
<!-- @submit.prevent executa uma ação -->
<p v-if="errors.length">
<b>Corrija os seguintes erros:</b>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</p>
<p>
<label for="name">Nome</label>
<input id="name" v-model="editedItem.name" type="text" name="name" required>
</p>
<p>
<label for="phone">Telefone</label>
<input id="phone" v-model="editedItem.phone" v-mask="'(##) #####-####'" type="text"
name="phone" required>
<!--<span>{{ '9999999999' | VMask('(##) ###-####') }}</span>-->
</p>
</form>
</fieldset>
</v-row>
</v-container>
</v-card-text>
<!-- Botoes Modal -->
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="red darken-2" text @click="close"> Cancelar </v-btn>
<v-btn :disabled="isAddButtonDisabled" color="blue darken-1" text @click="save" type="submit"> Salvar
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- Modal de Exclusão-->
<v-dialog v-model="dialogDelete" max-width="500px">
<v-card>
<v-card-title class="text-h5">Deseja realmente apaga esse campo ?</v-card-title>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="closeDelete()">Cancel</v-btn>
<v-btn large color="error" color="blue darken-1" text @click="deleteItemConfirm">OK</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:item.actions="{ item }">
<v-icon fab dark large color="primary" small class="mr-2" @click="editItem(item)">mdi-pencil</v-icon>
<v-icon large color="error" small @click="deleteItem(item)">mdi-delete</v-icon>
</template>
</v-data-table>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
//Array para armazenar todos os valores da coluna
const app = new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
errors: [],
name: null,
phone: null,
dialog: false,
dialogDelete: false,
headers: [
{
text: 'Nome',
align: 'start',
value: 'name',
},
{
text: 'Telefone',
value: 'phone'
},
{
text: 'Ação',
value: 'actions',
sortable: false
},
],
desserts: [],
editedIndex: -1,
editedItem: {name: 'matheus chimendes', phone: '(11) 90999-9987'}
}),
computed: {
isAddButtonDisabled() {
// validação de bloqueio do salve
const validName = false
return !(this.editedItem.name && this.editedItem.phone);
},
formTitle() {
return this.editedIndex === -1 ? 'Novo Contato' : 'Editar Contato'
}
},
methods: {
checkForm: function () { // validador de campos nome e telefone
this.errors = [];
if (!this.editedItem.name) {
this.errors.push("Nome e Sobrenome Obrigatório !");
} else if (!this.validName(this.editedItem.name)) {
this.errors.push('Nome e Sobrenome deverá ter no minímo 3 letras cada');
}
if (!this.editedItem.phone) {
this.errors.push('Telefone obrigatório!');
} else if (!this.validPhone(this.editedItem.phone)) {
this.errors.push('Telefone deverá conter (##) #####-####');
}
if (this.errors.length > 0) { //se o erro for menor que 0 deixar salvar, se não retorna ERRO!
return false;
}
return true;
},
// validaçao com o regex
validName: function (name) {
const regex = /\b[A-Za-zÀ-ú][A-Za-zÀ-ú]+,?\s[A-Za-zÀ-ú][A-Za-zÀ-ú]{2,19}\b/gi;
return regex.test(name);
},
validPhone: function (phone) {
const regex = /^\(\d\) \d{4,5}-\d$/gi;
return regex.test(
Matheus Chimendes
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)