phoneAuto

任意国家的电话号码：根据用户输入的区号选择掩码。+375 —— 白俄罗斯的掩码，+49 —— 德国，+7 701 —— 哈萨克斯坦。同时提供用于界面的数据：国旗、国家名称、电话区号。

签名

function phoneAuto(options?: { defaultCountry?: PhoneCountry; countries?: PhoneCountry[] }): PhoneAutoMask

interface PhoneAutoMask extends Mask {
  country(value: string): CountryInfo | undefined;
}

interface CountryInfo {
  code: PhoneCountry; // 'by'
  dial: string;       // '375'
  flag: string;       // '🇧🇾'
}

参数

选项	说明
defaultCountry	默认国家。不带 + 的号码视为本地号码：9991234567 → +7 (999) 123-45-67。空输入框显示该国家的模板和国旗。不设置时，号码始终需要带国家代码输入
countries	在哪些国家中识别。区号相同时第一个优先：['ca', 'us'] —— +1 识别为加拿大

注意事项

• 按最长匹配的区号识别：+3 和 +37 还不是国家，+375 是白俄罗斯。在识别出国家之前，最多接受 15 位数字（国际标准 E.164 的上限）。
• +7 是俄罗斯，但 +7 6… 和 +7 7… 是哈萨克斯坦（哈萨克斯坦运营商代码）。
• 当输入框已显示默认国家时，如需输入其他国家的号码，只需输入 + —— 输入会重新开始。
• 去掉掩码后为包含国家代码的全部数字：375291234567。
• 只有当号码按识别出的国家掩码填写完整时，valid 和 isValid 才为 true。
• 国内长途前缀会被去掉：设置 defaultCountry: 'gb' 时，号码 07400 123456 会变成 +44 7400 123456；设置 'ru' 时，8 999… 会变成 +7 (999)…。
• 国家列表见 预设掩码。全球全部 245 个国家 —— 使用 API 相同的 tinyval-phone 包。

示例

在输入框旁显示国旗和国家名称

<script setup lang="ts">
import { computed, ref } from 'vue';
import { phoneAuto, countryName } from 'tinyval-mask/presets';
import { vMask } from 'tinyval-mask/vue';

const phoneMask = phoneAuto({ defaultCountry: 'ru' });
const tel = ref('');
const country = computed(() => phoneMask.country(tel.value));
</script>

<template>
  <label>
    <span v-if="country">{{ country.flag }} {{ countryName(country.code, 'ru') }}</span>
    <input v-model="tel" v-mask.raw="{ mask: phoneMask, placeholder: '_' }" inputmode="tel" />
  </label>
  <!-- tel: '375291234567' -->
</template>

自定义国家选择

<script setup lang="ts">
import { computed, ref } from 'vue';
import { phone, phoneCountries, countryName, type PhoneCountry } from 'tinyval-mask/presets';

const countries = phoneCountries(); // [{ code: 'ru', dial: '7', flag: '🇷🇺' }, …]
const selected = ref<PhoneCountry>('ru');
const phoneMask = computed(() => phone(selected.value));
</script>

<template>
  <select v-model="selected">
    <option v-for="c in countries" :key="c.code" :value="c.code">
      {{ c.flag }} {{ countryName(c.code, 'ru') }} +{{ c.dial }}
    </option>
  </select>
  <input v-model="tel" v-mask.raw="phoneMask" />
</template>

不涉及界面

detectCountry('+375291234567'); // 'by'
detectCountry('77011234567');   // 'kz'
flag('de');                     // '🇩🇪'
countryName('de', 'ru');        // 'Германия'
unmask('+49 151 23456789', phoneAuto()); // '4915123456789'

国旗和名称

• flag(code) —— 根据国家代码生成国旗表情。Windows 会显示两个字母（RU）而不是国旗表情 —— 如果这很重要，请按 country.code 使用 tinyval-phone/flags 中的 SVG 图标。
• countryName(code, locale) —— 通过标准的 Intl.DisplayNames 获取任意语言的名称：包中没有名称表，因此不会增加体积。

自定义国家和格式

phoneTable 是本包的国家表。phoneFrom、phoneAutoFrom、detectCountryFrom、phoneCountriesFrom 的用法相同，但适用于任何表：可以添加国家或修改格式。国家条目为 [区号, 区号后的模板, 国内长途前缀, 国家特征]，前缀和特征是针对不含国家代码的数字的正则表达式。

import { phoneTable, phoneAutoFrom } from 'tinyval-mask/presets';

const table = {
  ...phoneTable,
  jp: ['81', '99-9999-9999', '0'],
  bs: ['1', '(999) 999-9999', '1', '242'], // +1 242… — Багамы / the Bahamas
} as const;
const tel = phoneAutoFrom(table, { defaultCountry: 'jp' });
mask('09012345678', tel); // '+81 90-1234-5678'

另请参阅

• 预设掩码：单个国家的 phone(country)
• vMask：.raw 和可见模板