开发预览更新于 2026-05-10

PhoneInput 电话号码输入

国家码下拉 + 号码输入。内置 12 个常见国家，可通过 countries 覆盖。

基础用法

国家码段独立背景，下拉支持模糊搜索。本组件不做 E.164 校验，由消费方接 libphonenumber 等库。

背景

CN · 138 0013 8000

<script setup lang="ts">
import { ref } from 'vue';
import { CfPhoneInput } from '@chufix-design/vue';
const phone = ref('138 0013 8000');
const country = ref('CN');
</script>

<template>
  <div style="max-width: 360px;">
    <CfPhoneInput v-model="phone" v-model:country="country" />
    <div style="margin-top: 8px; font-size: 12px; color: var(--fg-3); font-family: var(--font-mono);">
      {{ country }} · {{ phone }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfPhoneInput } from '@chufix-design/vue';
const phone = ref('138 0013 8000');
const country = ref('CN');
</script>

<template>
  <div style="max-width: 360px;">
    <CfPhoneInput v-model="phone" v-model:country="country" />
    <div style="margin-top: 8px; font-size: 12px; color: var(--fg-3); font-family: var(--font-mono);">
      {{ country }} · {{ phone }}
    </div>
  </div>
</template>

<CfPhoneInput value={phone} onChange={setPhone} country={country} onCountryChange={setCountry} />

<CfPhoneInput value={phone} onChange={setPhone} country={country} onCountryChange={setCountry} />

尺寸 / 错误 / 禁用

error 切红边，disabled 整体灰化。

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfPhoneInput } from '@chufix-design/vue';
const v1 = ref('138 0013 8000');
const v2 = ref('invalid!!');
const v3 = ref('555 123 4567');
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 360px;">
    <CfPhoneInput v-model="v1" country="CN" size="sm" />
    <CfPhoneInput v-model="v2" country="CN" :error="true" />
    <CfPhoneInput v-model="v3" country="US" size="lg" disabled />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfPhoneInput } from '@chufix-design/vue';
const v1 = ref('138 0013 8000');
const v2 = ref('invalid!!');
const v3 = ref('555 123 4567');
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 360px;">
    <CfPhoneInput v-model="v1" country="CN" size="sm" />
    <CfPhoneInput v-model="v2" country="CN" :error="true" />
    <CfPhoneInput v-model="v3" country="US" size="lg" disabled />
  </div>
</template>

<CfPhoneInput value={v} onChange={setV} error />
<CfPhoneInput value={v} onChange={setV} disabled />

<CfPhoneInput value={v} onChange={setV} error />
<CfPhoneInput value={v} onChange={setV} disabled />

API

属性	类型	默认值	说明
`modelValue` / `value`	`string`	`''`	国内号码段
`country`	`string`	`'CN'`	ISO 3166-1 alpha-2
`countries`	`CountryCode[]`	`defaultCountries`（12 项）	自定义国家列表
`size` / `placeholder` / `disabled` / `error`

CountryCode = { code: string; dial: string; label: string }