Skip to content

tinyval-phone ​

适用于 tinyval-mask 的全球电话掩码。tinyval-mask 包含最常用的 28 个国家,本包包含 245 个:根据用户输入的区号识别国家及其号码格式。

  • 与 tinyval-mask/presets 中的 phone / phoneAuto API 相同 —— 只需更换导入
  • 格式来自 Google libphonenumber 数据:每个国家的号码都按当地的写法显示
  • 能区分共用区号的国家:+1 242 是巴哈马,+44 7797 是泽西岛,+7 701 是哈萨克斯坦
  • 国内长途前缀不会造成干扰:英国的 07400 123456 → +44 7400 123456
  • 所有国家的 SVG 国旗图标 —— 按需逐个加载,只有用到的才会进入打包文件
  • 全部国家约 4 kB gzip(不含国旗)

安装 ​

bash
npm install tinyval-mask tinyval-phone

试一试 ​

以国家区号开头:+81、+55、+971……
去掉掩码的值: ""
模板:
试试:

快速开始 ​

ts
import { mask, unmask } from 'tinyval-mask';
import { phoneAuto, phone, countryName } from 'tinyval-phone';
import { loadFlag } from 'tinyval-phone/flags';

const tel = phoneAuto({ defaultCountry: 'ru' });
mask('+81 9012345678', tel);       // '+81 90-1234-5678'
mask('89991234567', tel);          // '+7 (999) 123-45-67'
unmask('+81 90-1234-5678', tel);   // '819012345678'
tel.country('+1 242 359 1234');    // { code: 'bs', dial: '1', flag: '🇧🇸' }
countryName('bs', 'ru');           // 'Багамы'

mask('0612345678', phone('fr'));   // '+33 6 12 34 56 78'
await loadFlag('bs');              // '<svg …>' — иконка флага

如何选择 ​

  • 只需要俄罗斯、独联体和几个大国 —— tinyval-mask/presets 就够了,不需要额外的包。
  • 用户来自世界各地,或需要所有国家的列表 —— 使用 tinyval-phone。
  • 国旗图标(Windows 不显示国旗表情)—— 使用 tinyval-phone/flags,也可以与 tinyval-mask 的掩码一起使用。

下一步 ​

  • 国家与格式 —— 格式从哪里来,如何区分共用区号的国家
  • 国旗图标 —— 在 <img> 中使用 SVG 或直接插入标记,Vue 中和无框架时的用法
  • phoneAuto —— 全部选项
  • 输入框 和 Vue —— 如何将掩码绑定到输入框