vue-email-dropdown

A Vue component for autocomplete email domains

Features

• Allows passing a list of domains to be used in for the suggestions.
• Allows passing a list of default domains that are going to be used when type @.
• Closes the list by pressing Esc.
• Allows the navigate the list by pressing Up / Down.
• Closes the list on click outside.
• Allows configuring the list size.

Demo

Props

Installation

npm install vue-email-dropdown --save

# or with yarn

yarn add vue-email-dropdown

Usage

<template>
  <EmailDropdown :domains="domains" :defaultDomains="defaultDomains" />
</template>

<script>
// Import package
import EmailDropdown from "vue-email-dropdown";
// Import styles
import "vue-email-dropdown/dist/vue-email-dropdown.css";

export default {
  components: {
    EmailDropdown
  },
  data() {
    return {
      domains: [
        "yourcompany.com",
        "google.com",
        "gmx.de",
        "googlemail.com",
        "hotmail.fr",
        "hotmail.it",
        "web.de",
        "yahoo.co.in",
        "yahoo.com",
        "yahoo.in"
      ],
      defaultDomains: ["gmail.com", "hotmail.com", "msn.com", "outlook.com", "yahoo.com"]
    };
  }
};
</script>

Development setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your unit tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Contributing

1. Fork it (https://github.com/dannyfeliz/vue-email-dropdown/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request