@zuzuche/zcs-intl-tel-input

intl-tel-input

项目简要说明 + 示例图

Table of Contents

• Introduction
• Demo
• Install
• Example
• License

Introduction

根据用户输入的电话号码格式化成对应国家的号码，对于合法的号码给予格式化，不合法的号码不做处理

对传入的数据会做校验处理，校验完毕后通过onValidate返回，该参数有以下几个值

• number 电话号码
• isValid 是否合法
• country 所属国家

支持的props

Prop name	Type	Default	Required	Description
autocomplete	string	on	false	是否开启自动完成功能
defaultCountryCode	string	''	false	默认的国家代码
disabled	boolean	false	false	是否禁用输入框
disabledFetchingCountry	boolean	true	false	是否根据ip获取国家代码
disabledFormatting	boolean	false	false	是否禁用电话格式化
dropdownOptions	object	{}	false	下拉的每一项选项
enabledCountryCode	boolean	false	false	是否显示区号
enabledFlags	boolean	true	false	是否显示国旗icon
ignoredCountries	array	() => []	false	需要忽略的国家
inputClasses	string	''	false	输入框的类名自定义
inputOptions	object	{showDialCode: true}	false	输入框选项 目前只支持showDialCode，输入框是否展示区号（建议不要传false）
invalidMsg	string	phone number is invalid	false	电话号码非法的提示信息
maxLength	number	25	false	最大长度
name	string	telephone	false	input的name属性
onlyCountries	array	() => []	false	只展示哪些国家
placeholder	string	Please input phone number	false	输入框的占位字符
preferredCountries	array	() => []	false	偏好的国家，会优先插在前方
required	boolean	false	false	是否必填
value	string	''	false	输入框的初始值
wrapperClasses	string	''	false	最外层容器的class名称

Event name	Type	Description
onValidate	function	输入号码返回校验的信息，返回对象{ number, isValidate, country }
onInput	function	输入的回调
onBlur	function	失去焦点的回调
onEnter	function	输入回车的回调
onSpace	function	输入空格的回调

⬆ Back to Top

Demo

文档和在线Demo演示

⬆ Back to Top

Install

javascript npm i @zcs/intl-tel-input -S

yarn add @zcs/intl-tel-input -S

⬆ Back to Top

Example

javascript import IntlTelInput from '@zcs/intl-tel-input';

<intl-tel-input value="props.phone" @onInput="onInput" @onValidate="onValidate"

⬆ Back to Top

License

MIT

⬆ Back to Top

babel-jest 不支持 babel7 解决方案

bash yarn add --dev babel-core@^7.0.0-bridge.0

可以认为 babel-core@^7.0.0-bridge.0 插件是将 babel6 衔接到 babel7 的一个桥梁

参考文章：npm 组件发布