ntl-ui

international ui

This is ntl-ui, a set of ui libraries for internationalization. For Vue 2.x. (But Now there is only one component: national-input)

How to install

npm install ntl-ui -S

Quick Start

import Vue from 'vue'
import Ntl from 'ntl-ui'

Vue.use(Ntl)

// or
import {
  NtlInput,
  // ...
} from 'ntl-ui'

Vue.component(NtlInput.name, NtlInput)

Explain

  <itl-input v-model="phoneValue" />
  
  // itl-input main options：
  
  props: {
    value: { // International number
      default() {
        return ''
      }
    },
    options: {
      default() {
        return {
          iso: '', // National iso code
          hoverStatus: true, // Whether to display specific information when opening the floating flag
          focusStatus: true, // Whether to turn on focus display of head text
          placeholder: 'Enter Number', // Input box placeholder
          errorSlot: false, // Whether to enable the placeholder of error prompt
          errorMsg: 'Please input validate PhoneNumber!', // Verification failure error message
          validate: true // Enable verification
        }
      }
    },
  },
  methods: {
    PhoneNumber // Receive a number and return the corresponding international information, specific documents：https://www.npmjs.com/package/libphonenumber-js#min-vs-max-vs-mobile-vs-core
    isValidPhoneNumber：// Check the number
    ...
  }