Vue component for input international telephone numbers and validating.
npm install vue-intl-telephone-input
bash
yarn add vue-intl-telephone-input
`
- npm:
`bash
npm i --save vue-intl-telephone-input
`Usage
- Install as a global component:
`javascript
import IntlTelInput from 'vue-intl-telephone-input'; Vue.component('intl-tel-input', IntlTelInput);
`- In your page component:
`js
...
...
`- Import in single component:
`js
`$3
| Property value | Type | Default value | Description |
| -------------- | ---- | ------------- | ----------- |
|
countryCode | String | 'tw' | Default country. ex: 'tw', 'jp', 'kr' |
| dialCode | String | '' | Enter a country dial code. ex: '886', '81', '82' |
| value | String | '' | Enter a phone number |
| options | Object | {} | Custom Options |
| options.className | String | '' | Set custom css class name |
| options.input | Object | | Set input attribute |
| options.input.required | Boolean | false | Required property for HTML5 required attribute |
| options.input.readonly | Boolean | false | Set readonly attribute |
| options.input.placeholder | String | '' | Set placeholder attribute | | 參數 | 型態 | 預設值 | 描述 |
| -------------- | ---- | ------------- | ----------- |
|
countryCode | String | 'tw' | 預設國家代碼 ex: 'tw', 'jp', 'kr' |
| dialCode | String | '' | 國際碼 ex: '886', '81', '82' |
| value | String | '' | 電話號碼 |
| options | Object | {} | 客制選項 |
| options.className | String | '' | 設置客制 css class 名稱 |
| options.input | Object | | 設定 input 的屬性 |
| options.input.required | Boolean | false | 是否為必填 |
| options.input.readonly | Boolean | false | 是否為不能更改 |
| options.input.placeholder | String | '' | 設定預設顯示字串 |$3
| Property value | Arguments | Description |
| -------------- | --------- | ----------- |
|
validateSuccess | Object | Fires when the input changes on validate success with the argument is the object includes { number, countryCode } |
| validateError | | Fires when the input changes on validate error | | 事件名稱 | 參數型別 | 描述 |
| -------------- | --------- | ----------- |
|
validateSuccess | Object | 電話格式正確時觸發,會回傳 { number, countryCode } |
| validateError | | 電話格式錯誤時觸發,不會回傳任何參數 |
$3
- you can set
options.className :
`js
...
...
``