GLF Email Domain Suggestion

Este componente tem como objetivo oferecer sugestões de domínios de e-mail à medida que o usuário digita. Após inserir o símbolo "@" no campo de e-mail, uma lista de domínios predefinidos é disponibilizada. Para utilizar este componente, é necessário estar utilizando o framework Vue.js 2 com o Quasar v0.17 ou o Vue.js 3 com o Quasar v2+.

• Demo
• Funções
• instalação
• Uso
• Props

Demo

Clique aqui para visualizar

Funções

• Fornece sugestões de domínios de e-mail conforme os usuários digitam seus endereços de e-mail.
• Sugestões de domínio personalizáveis.
• Compatível com Vue 2 e 3.
• Compatível com Quasar 0.17 e 2+.

instalação

Para instalar o GLF Email Domain Suggestion, você pode usar npm ou yarn.

Para usar o componente no VueJS 2 e Quasar 0.17 deve ser instalado a versão 1.

# Using npm
npm install glf-email-domain-suggestion@^1.0.0

# Using yarn
yarn add glf-email-domain-suggestion@^1.0.0

Para usar o componente no VueJS 3 e Quasar 2+ deve ser instalado a versão 2.

# Using npm
npm install glf-email-domain-suggestion@^2.0.0

# Using yarn
yarn add glf-email-domain-suggestion@^2.0.0

Após instalar basta registrar o componente no arquivo main.js

VueJS 3 e Quasar v2+

import { createApp } from "vue";
import App from "./App.vue";
import { Quasar } from "quasar";
import quasar from "./plugins/quasar";

import GlfEmailDomainSuggestion from "glf-email-domain-suggestion";

createApp(App).use(Quasar, quasar).use(GlfEmailDomainSuggestion).mount("#app");

VueJS 2 e Quasar v0.17

import Vue from "vue";
import App from "./App.vue";
import GlfEmailDomainSuggestion from "glf-email-domain-suggestion";

Vue.use(GlfEmailDomainSuggestion);

new Vue({
  render: (h) => h(App),
}).$mount("#app");

Uso

VueJS 3 e Quasar v2+

<template>
  <div>
    <glf-email-domain-suggestion
        v-model="email"
        :domains="domains"
    />
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const email = ref('');
    const domains = ['gmail.com', 'yahoo.com', 'hotmail.com'];

    return {
      email,
      domains,
    };
  },
};
</script>

VueJS 2 e Quasar v0.17

<template>
    <div>
        <glf-email-domain-suggestion
            v-model="email"
            :domains="domains"
        />
    </div>
</template>

<script>
export default {
    data() {
        return {
            email: '',
            domains: ['gmail.com', 'yahoo.com', 'hotmail.com']
        }
    }
}
</script>

Props

VueJS 2 e Quasar v0.17

| Propriedade | Tipo | Required | Default | Descrição | Exemplo | | ----------------- | -------- | -------- | ------- | ----------------------------------------------- | ----------------------------------------- | | v-model | String | Sim | - | Variavel que receberá o valor do email | email | | domains | Array | Sim | - | Lista com os dominios para sugestão | ['gmail.com', 'yahoo.com', 'hotmail.com'] | | maxDomainsVisible | Number | Opcional | 5 | Numero de dominios a serem sugeridos | 5 | | label | String | Opcional | E-mail | Placeholder que será mostrado no campo | Digite seu e-mail | | error | Boolean | Opcional | - | Controla o estado do erro do input (Vuelidate) | $v.form.email.$error | | errorBlur | Function | Opcional | - | Evento para mostrar o erro no input (Vuelidate) | $v.form.email.$touch | | errorLabel | String | Opcional | - | Mensagem de erro no input (Vuelidate) | $v.form.email.$touchDados inválidos |

VueJS 3 e Quasar v2+

| Propriedade | Tipo | Required | Default | Descrição | Exemplo | | ----------------- | ------- | -------- | ------- | -------------------------------------- | ----------------------------------------- | | v-model | String | Sim | - | Variavel que receberá o valor do email | email | | domains | Array | Sim | - | Lista com os dominios para sugestão | ['gmail.com', 'yahoo.com', 'hotmail.com'] | | maxDomainsVisible | Number | Opcional | 5 | Numero de dominios a serem sugeridos | 5 | | label | String | Opcional | E-mail | Placeholder que será mostrado no campo | Digite seu e-mail | | square | Boolean | Opcional | True | Deixa o campo quadrado | - | | filled | Boolean | Opcional | True | Deixa o campo com fundo escuro | - | | counter | Boolean | Opcional | True | Mostra a quantidade de caracteres | - |