EducationLink / Vue Tel Input
Licence: mit
International Telephone Input with Vue https://educationlink.github.io/vue-tel-input/
Stars: ✭ 443
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Tel Input
React Native Phone Input
Phone input box for React Native
Stars: ✭ 356 (-19.64%)
Mutual labels: phone, input
Vue Phone Number Input
A phone number input made with Vue JS (format & valid phone number)
Stars: ✭ 407 (-8.13%)
Mutual labels: phone, input
React Phone Input 2
📞 Highly customizable phone input component with auto formatting
Stars: ✭ 446 (+0.68%)
Mutual labels: phone, input
Home Automation
Raspberry Pi 3 based home automation with NodeJS and React Native.
Stars: ✭ 3,395 (+666.37%)
Mutual labels: phone
Vue Numeric
Input field component to display a formatted currency value based on Vue.js
Stars: ✭ 341 (-23.02%)
Mutual labels: input
Multiitem
一个优雅的实现多类型的RecyclerView类库 支持DataBinding Form表单录入 跨多个RecyclerView拖动
Stars: ✭ 381 (-14%)
Mutual labels: input
Promptui
Interactive prompt for command-line applications
Stars: ✭ 4,621 (+943.12%)
Mutual labels: input
Inputkit
📝InputKit, an Elegant Kit to limits your input text, inspired by BlocksKit, written in both Objective-C & ⚡️Swift.
Stars: ✭ 420 (-5.19%)
Mutual labels: input
Shsphonecomponent
UITextField and NSFormatter subclasses for formatting phone numbers. Allow different formats for different countries(patterns).
Stars: ✭ 367 (-17.16%)
Mutual labels: phone
Phoneinfoga
PhoneInfoga is one of the most advanced tools to scan international phone numbers using only free resources. It allows you to first gather standard information such as country, area, carrier and line type on any international phone number. Then search for footprints on search engines to try to find the VoIP provider or identify the owner.
Stars: ✭ 5,927 (+1237.92%)
Mutual labels: phone
Input Framer
Framer module to add inputs to your prototypes and easily turn your designs inputs into real inputs
Stars: ✭ 342 (-22.8%)
Mutual labels: input
Countrypickerview
A simple, customizable view for efficiently collecting country information in iOS apps.
Stars: ✭ 397 (-10.38%)
Mutual labels: phone
Androrat
AndroRAT | Remote Administrator Tool for Android OS Hacking
Stars: ✭ 340 (-23.25%)
Mutual labels: phone
Docker Freepbx
Dockerized FreePBX 15 w/Asterisk 17, Seperate MySQL Database support, and Data Persistence and UCP
Stars: ✭ 331 (-25.28%)
Mutual labels: phone
Twilio Java
A Java library for communicating with the Twilio REST API and generating TwiML.
Stars: ✭ 371 (-16.25%)
Mutual labels: phone
Voice Overlay Ios
🗣 An overlay that gets your user’s voice permission and input as text in a customizable UI
Stars: ✭ 440 (-0.68%)
Mutual labels: input
Mobly
E2E test framework for tests with complex environment requirements.
Stars: ✭ 424 (-4.29%)
Mutual labels: phone
vue-tel-input
International Telephone Input with Vue.
Documentation and live demo
Getting started
-
Install the plugin:
npm install vue-tel-input
-
Add the plugin into your app:
import Vue from 'vue' import VueTelInput from 'vue-tel-input' import 'vue-tel-input/dist/vue-tel-input.css' Vue.use(VueTelInput)
-
Use the
vue-tel-input
component:<template> <vue-tel-input v-model="phone"></vue-tel-input> <template>
Installation
npm
npm install vue-tel-input
Install the plugin into Vue:
import Vue from 'vue'
import VueTelInput from 'vue-tel-input'
import 'vue-tel-input/dist/vue-tel-input.css'
Vue.use(VueTelInput, options) // Define default global options here (optional)
View all available options in Props.
Or use the component directly:
<!-- your-component.vue-->
<template>
<vue-tel-input v-model="value"></vue-tel-input>
</template>
<script>
import { VueTelInput } from 'vue-tel-input'
export default {
components: {
VueTelInput,
},
};
<style src="vue-tel-input/dist/vue-tel-input.css"></style>
</script>
Browser
<script src="https://unpkg.com/vue-tel-input"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-tel-input/dist/vue-tel-input.css">
** If Vue is detected in the Page, the plugin is installed automatically.**
** Otherwise, manually install the plugin into Vue:
Vue.use(window['vue-tel-input']);
vue-form-generator
Use as a custom field of-
Add a component using
vue-form-generator
'sabstractField
mixin<!-- tel-input.vue --> <template> <vue-tel-input v-model="value"></vue-tel-input> </template> <script> import { abstractField } from 'vue-form-generator'; export default { name: 'TelephoneInput', mixins: [abstractField], }; </script>
-
Register the new field as a global component
import Vue from 'vue'; import TelInput from '<path>/tel-input.vue'; Vue.component('field-tel-input', TelInput);
-
Now it can be used as
tel-input
in schema ofvue-form-generator
var schema: { fields: [{ type: "tel-input", label: "Awesome (tel input)", model: "telephone" }] };
Read more on vue-form-generator
's instruction page
Changelog
License
Copyright (c) 2018 EducationLink. Released under the MIT License.
made with ❤ by Steven.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].