自定义国家和国旗
国家格式和国旗都可以按需修改 —— 与 tinyval 的错误提示 的方式相同:一条命令把包中的数据复制到你的项目中,你修改文件,然后在应用启动时加载一次。
国家和格式
bash
npx tinyval-phone countries # все 245 стран → phones/countries.ts
npx tinyval-phone countries ru kz de # только эти страны, остальные остаются как в пакетеts
// phones/countries.ts
import type { Countries } from 'tinyval-phone';
export default {
ru: ['7', '(999) 999-99-99', '[78]'],
kz: ['7', '(999) 999-99-99', '[78]', '[67]'],
de: ['49', '9999 9999999[9]', '0'], // свой формат
ab: ['7', '(999) 999-99-99', '[78]', '940'], // новая страна: +7 940…
xk: null, // убрать страну
} satisfies Countries;ts
// main.ts — до создания масок
import { setCountries } from 'tinyval-phone';
import countries from './phones/countries';
setCountries(countries);国家条目为 [区号, 区号后的模板, 国内长途前缀, 国家特征]:
| 部分 | 示例 | 含义 |
|---|---|---|
| 区号 | '49' | 不带 + 的电话区号 |
| 模板 | '999 9999999[9]' | 9 —— 数字,[9] —— 可选数字,字符串中的 '\\9' —— 字面数字 9 |
| 前缀 | '0'、'[78]' | 拨打本地号码前加的前缀;会被去掉:07400… → +44 7400… |
| 特征 | '242'、'…$' | 用于共用区号的国家:不含国家代码的号码开头,或以 $ 结尾时表示整个号码 |
前缀和特征是针对不含国家代码的号码数字的正则表达式。如何区分共用区号的国家 —— 见 国家与格式。
只保留自己的国家,不包含世界其他国家 —— setCountries(countries, { replace: true }):其他号码将不会被识别,也不会是 valid。
国旗
该命令会把所选国旗的 SVG 复制到一个模块中 —— 你可以修改标记或替换为自己的。这个文件里的所有国旗都会进入打包文件,所以只保留你要修改的那些:
bash
npx tinyval-phone flags ru kz # → phones/flags.ts
npx tinyval-phone flags --all --svg --out public/flags # файлы .svg — для <img> или графического редактораts
// phones/flags.ts
import type { Flags } from 'tinyval-phone/flags';
export default {
ru: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 342">…</svg>',
ab: () => import('./ab.svg?raw').then((m) => m.default), // загрузится, когда понадобится
su: null, // флага нет
} satisfies Flags;ts
import { setFlags } from 'tinyval-phone/flags';
import flags from './phones/flags';
setFlags(flags);整套使用自己的国旗
用函数代替对象可以加载任意国旗。返回 undefined 时使用内置国旗。按代码设置的国旗优先于该函数。
ts
// например, круглые флаги с вашего CDN
setFlags((code) => fetch(`/flags/round/${code}.svg`).then((r) => (r.ok ? r.text() : undefined)));resetFlags() 恢复内置国旗,flagCodes() 列出包括你自定义国旗在内的所有国旗。
不使用文件
只有少量修改时不必单独建文件 —— setCountries 和 setFlags 可以直接在代码中传入对象:
ts
setCountries({ de: ['49', '9999 9999999[9]', '0'] });
setFlags({ ru: myRussianFlagSvg });