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	-