1.1.12 • Published 3 years ago

el-phone-number-input v1.1.12

Weekly downloads
17
License
MIT
Repository
github
Last release
3 years ago

el-phone-number-input

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

快速开始

1. 安装

npm i element-ui el-phone-number-input -S

2. 引入

  • 全局引入

    import { ElPhoneNumberInput } from 'ElPhoneNumberInput'
    Vue.component(ElPhoneNumberInput.name,ElPhoneNumberInput)
  • 或者单独引入

  import { ElPhoneNumberInput, mobileValidator, phoneNumberValidator } from 'ElPhoneNumberInput'
  export default {
    components: { ElPhoneNumberInput },
  }

3. form表单

<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>

参数

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

3 years ago

1.1.11

3 years ago

1.1.10

3 years ago

1.1.9

3 years ago

1.1.8

3 years ago

1.1.7

3 years ago

1.1.6

4 years ago

1.1.5

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago