# el-phone-number-input

> 基于ElementUI的国际电话输入框组件 查看示例：http://greper.veryreader.com/ElPhoneNumberInput/index.html

Latest version **1.1.12** (published 2021-07-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install el-phone-number-input
pnpm add el-phone-number-input
yarn add el-phone-number-input
bun add el-phone-number-input
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.12 |
| Published | 2021-07-01 |
| First published | 2019-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 2.5 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 9 |
| Maintainers | greper |

## Links

- npm: https://www.npmjs.com/package/el-phone-number-input
- Repository: https://github.com/greper/el-phone-number-input
- Homepage: https://github.com/greper/el-phone-number-input#readme
- Issues: https://github.com/greper/el-phone-number-input/issues
- npm.io page: https://npm.io/package/el-phone-number-input

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [libphonenumber-js](https://npm.io/package/libphonenumber-js.md) ^1.7.54

## Recent versions

- 1.1.12 (latest) — 2021-07-01
- 1.1.11 — 2021-06-18
- 1.1.10 — 2021-06-18
- 1.1.9 — 2021-06-16
- 1.1.8 — 2021-06-16
- 1.1.7 — 2021-05-18
- 1.1.6 — 2020-10-31
- 1.1.5 — 2020-08-13
- 1.1.4 — 2020-08-13
- 1.1.3 — 2020-08-11
- 1.1.2 — 2020-08-11
- 1.1.1 — 2020-07-15
- 1.1.0 — 2020-07-15
- 1.0.4 — 2019-11-07
- 1.0.3 — 2019-11-07
- … 3 more at https://npm.io/package/el-phone-number-input/versions

## README

# el-phone-number-input
基于ElementUI的国际电话输入框组件
查看示例：http://greper.veryreader.com/ElPhoneNumberInput/index.html

## 快速开始
    
### 1. 安装
```shell
npm i element-ui el-phone-number-input -S
```

### 2. 引入
* #### 全局引入
 
 ```javascript
 import { ElPhoneNumberInput } from 'ElPhoneNumberInput'
 Vue.component(ElPhoneNumberInput.name,ElPhoneNumberInput)

 ```
 * #### 或者单独引入
```javascript
  import { ElPhoneNumberInput, mobileValidator, phoneNumberValidator } from 'ElPhoneNumberInput'
  export default {
    components: { ElPhoneNumberInput },
  }
 ```
 
 ### 3. form表单
 ```html
 <template>
  <el-form ref="form" :model="form"  :rules="rules" label-width="120px" >
         <el-form-item label="手机号码"  prop="mobile">
           <el-phone-number-input v-model="form.mobile" :onlyCountries="onlyCountries"></el-phone-number-input>
         </el-form-item>
  </el-form>
 </template>
 
 <script>
 import { ElPhoneNumberInput} from 'ElPhoneNumberInput'
 export default {
   name: 'Example',
   components: { ElPhoneNumberInput },
   form: {
	   mobile: {
	     callingCode: '86',
	     phoneNumber: '18611112222'
	   }
	 }
 }
 </script>
 ```
## 参数

名称 | 详情| 示例 |  默认值   
-|-|-|-
value | Object类型的默认值，3个属性均可为空<br/>coutryCode:国家代码<br/>callingCode:电话区号<br/>phoneNumber:电话号码<br/> | {<br/>coutryCode:'CN',<br/>callingCode:'86',<br/>phoneNumber:'18601010202'<br/>} | 无 |
numberPlaceholder | 号码输入框的placeholder| | 手机号 |
codePlaceHolder | 地区选择框的placeholder| | 请选择 |
onlyCountries | 仅支持哪些国家地区 |['CN', 'HK', 'TW', 'US'] | 无 |
ignoreCountries | 忽略哪些国家地区 |['CN', 'HK', 'TW', 'US'] | 无 |
selectWidth | 国家地区选择框的宽度，注意要带px，也支持% | 130px | 130px |
priorityCountries | 哪些国家地区优先 |['CN', 'HK', 'TW', 'US'] | 无 |
clearable | 是否支持清空 | true,false | true |
filterable | 是否支持国家地区过滤 | true,false | true |
defaultCountry | 输入手机号后触发默认选择的国家 | CN | CN |

---
_Source: https://npm.io/package/el-phone-number-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._