BizPhoneInput 手机号输入

实名 / 通讯录 / 账号体系的标准手机号录入：仅数字 + 11 位截断 + 3-4-4 分段展示、失焦校验（1[3-9] 号段规则）、运营商识别、可选编辑回显脱敏（非聚焦 138****1234、聚焦显原文核对）。与身份证 / 银行卡 / 信用代码输入同族，v-model 始终是纯数字明文。

座机模式（v0.7 type="landline"）：区号-号码[-分机] 三段式录入——区号 0 开头 3-4 位、号码 7-8 位、分机 2-6 位可选；allow-hotline 支持 400/800 热线号（区号位直接填 400 + 7 位号码，无分机）；脱敏为 010-****8888，change / blur 的 info 携带 kind / area / number / ext 结构化字段。

基础用法

中国移动脱敏：138****1234

v-model：13856781234

输入自动分段；失焦校验并在下方提示原因；满 11 位展示运营商识别与脱敏预览。

<script setup lang="ts">
/** 基础用法：分段展示 + 失焦校验 + 运营商识别，v-model 始终纯数字 11 位 */
import { ref } from 'vue'
import { BizPhoneInput } from 'vue3-ep-biz-lib'

const phone = ref('13856781234')
</script>

<template>
  <div>
    <BizPhoneInput v-model="phone" style="max-width: 320px" />
    <div class="tip">v-model：{{ phone }}</div>
  </div>
</template>

<style scoped>
.tip {
  margin-top: 8px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

显示代码

回显脱敏 · 前缀插槽 · 编程式校验

mask-mode="masked"：非聚焦脱敏，聚焦显原文

mask-mode="masked" 用于编辑已有手机号场景（脱敏防肩窥，聚焦核对原文）；validate() 主动取 BizPhoneInfo。

<script setup lang="ts">
/** 进阶：编辑回显脱敏（聚焦显原文核对）+ 前缀插槽 + 编程式校验 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizPhoneInput } from 'vue3-ep-biz-lib'
import { Iphone } from '@element-plus/icons-vue'

const phone = ref('16612345678')
const inputRef = ref<InstanceType<typeof BizPhoneInput> | null>(null)

const check = (): void => {
  const info = inputRef.value?.validate()
  if (info !== undefined && info.valid) {
    ElMessage.success(`校验通过：${info.masked}（${info.formatted}）`)
  }
}
</script>

<template>
  <div>
    <BizPhoneInput ref="inputRef" v-model="phone" mask-mode="masked" style="max-width: 320px">
      <template #prefix>
        <ElIcon><Iphone /></ElIcon>
      </template>
    </BizPhoneInput>
    <div class="ops">
      <ElButton size="small" @click="check">validate() 编程式校验</ElButton>
      <span class="tip">mask-mode="masked"：非聚焦脱敏，聚焦显原文</span>
    </div>
  </div>
</template>

<style scoped>
.ops {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.tip {
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

显示代码

表单规则集成

姓名

手机号

el-form 双规则：必填 + 格式（blur 时机），与组件内建失焦提示互为补充。

<script setup lang="ts">
/** el-form 集成：手机号必填 + 格式双规则（blur 时机） */
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { BizPhoneInput } from 'vue3-ep-biz-lib'

const formRef = ref<FormInstance>()
const form = reactive({ phone: '', name: '' })

const rules: FormRules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      validator: (_rule, value: string, callback) => {
        if (value !== '' && !/^1[3-9]\d{9}$/.test(value)) callback(new Error('手机号格式不正确'))
        else callback()
      },
      trigger: 'blur',
    },
  ],
}

const submit = (): void => {
  void formRef.value?.validate((valid) => {
    if (valid) ElMessage.success('提交成功')
  })
}
</script>

<template>
  <ElForm ref="formRef" :model="form" :rules="rules" label-width="80px" style="max-width: 420px">
    <ElFormItem label="姓名">
      <ElInput v-model="form.name" placeholder="收货人姓名" />
    </ElFormItem>
    <ElFormItem label="手机号" prop="phone">
      <BizPhoneInput v-model="form.phone" :show-info="false" />
    </ElFormItem>
    <ElFormItem>
      <ElButton type="primary" @click="submit">提交</ElButton>
    </ElFormItem>
  </ElForm>
</template>

显示代码

编辑回显脱敏保存

未修改（聚焦可见原文核对）

masked 模式防肩窥；未修改不提交手机号字段（脏检查由业务侧比较）。

<script setup lang="ts">
/** 编辑回显：明文入库 → 脱敏展示 → 仅修改过才提交新值 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizPhoneInput } from 'vue3-ep-biz-lib'

/** 模拟后端返回的明文（实际应后端脱敏下发更安全） */
const original = '13912345678'
const phone = ref(original)
const touched = ref(false)

const onChange = (): void => {
  touched.value = phone.value !== original
}

const save = (): void => {
  ElMessage.success(touched.value ? `提交新手机号：${phone.value}` : '未修改，不提交手机号字段')
}
</script>

<template>
  <div>
    <BizPhoneInput v-model="phone" mask-mode="masked" style="max-width: 320px" @change="onChange" />
    <div class="ops">
      <ElButton size="small" type="primary" @click="save">保存</ElButton>
      <span class="tip">{{ touched ? '已修改，将提交新值' : '未修改（聚焦可见原文核对）' }}</span>
    </div>
  </div>
</template>

<style scoped>
.ops {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.tip {
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

显示代码

区号前缀插槽

+86

v-model：（空）——区号仅展示，不进 v-model；suffix 插槽同理可挂「获取验证码」按钮

prefix 插槽挂 +86 区号；v-model 仍是裸 11 位，suffix 同理可挂验证码按钮。

<script setup lang="ts">
/** 国际区号组合：prefix 插槽 +86，v-model 仍是裸 11 位 */
import { ref } from 'vue'
import { BizPhoneInput } from 'vue3-ep-biz-lib'

const phone = ref('')
</script>

<template>
  <div>
    <BizPhoneInput v-model="phone" style="max-width: 320px">
      <template #prefix>
        <span class="code">+86</span>
      </template>
    </BizPhoneInput>
    <div class="tip">
      v-model：{{ phone || '（空）' }}——区号仅展示，不进 v-model；suffix 插槽同理可挂「获取验证码」按钮
    </div>
  </div>
</template>

<style scoped>
.code {
  font-size: 13px;
  color: var(--el-text-color-regular);
}
.tip {
  margin-top: 8px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

显示代码

紧急联系人列表

多条手机号动态增删，每条独立分段/校验/错误提示。

<script setup lang="ts">
/** 紧急联系人列表：多条手机号动态增删（每条独立校验状态） */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizPhoneInput } from 'vue3-ep-biz-lib'
import type { BizPhoneInfo } from 'vue3-ep-biz-lib'

const contacts = ref([
  { id: 1, name: '父亲', phone: '' },
  { id: 2, name: '母亲', phone: '' },
])
let seed = 2

const add = (): void => {
  seed += 1
  contacts.value = [...contacts.value, { id: seed, name: `联系人${seed}`, phone: '' }]
}

const remove = (id: number): void => {
  contacts.value = contacts.value.filter((c) => c.id !== id)
}

const onBlur = (info: BizPhoneInfo): void => {
  if (!info.valid) ElMessage.warning(info.message)
}
</script>

<template>
  <div class="list">
    <div v-for="contact in contacts" :key="contact.id" class="row">
      <ElInput v-model="contact.name" style="width: 120px" placeholder="称呼" />
      <BizPhoneInput v-model="contact.phone" :show-error="true" @blur="onBlur" />
      <ElButton text type="danger" @click="remove(contact.id)">删除</ElButton>
    </div>
    <ElButton size="small" dashed style="width: 100%" @click="add">+ 添加联系人</ElButton>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.row :deep(.biz-phone-input) {
  flex: 1;
}
</style>

显示代码

座机模式基础

--

座机脱敏：010-****8888

区号 0 开头 3-4 位、号码 7-8 位；完整后下方显示「座机」徽标与脱敏预览。 当前值：010-66668888

type="landline" 区号-号码三段式：区号 0 开头 3-4 位、号码 7-8 位，完整后显示「座机」徽标与脱敏预览。

<script setup lang="ts">
/** 场景：座机基础——区号-号码三段式录入，失焦校验 */
import { ref } from 'vue'
import { BizPhoneInput } from 'vue3-ep-biz-lib'

const phone = ref('010-66668888')
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 420px">
    <BizPhoneInput v-model="phone" type="landline" />
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      区号 0 开头 3-4 位、号码 7-8 位；完整后下方显示「座机」徽标与脱敏预览。
      当前值：<code>{{ phone }}</code>
    </p>
  </el-space>
</template>

显示代码

分机录入

允许分机

--

座机脱敏：0755-****9999

分机以 - 拼接在号码后输出（0755-86669999-6001）；关闭 allow-extension 隐藏第三段输入。

allow-extension 控制第三段（2-6 位可选），输出以 - 拼接（0755-86669999-6001）。

<script setup lang="ts">
/** 场景：分机录入——allow-extension 控制第三段（2-6 位可选） */
import { ref } from 'vue'
import { BizPhoneInput } from 'vue3-ep-biz-lib'

const phone = ref('0755-86669999-6001')
const withExt = ref(true)
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 460px">
    <el-switch v-model="withExt" active-text="允许分机" />
    <BizPhoneInput v-model="phone" type="landline" :allow-extension="withExt" :key="String(withExt)" />
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      分机以 <code>-</code> 拼接在号码后输出（0755-86669999-6001）；关闭 allow-extension 隐藏第三段输入。
    </p>
  </el-space>
</template>

显示代码

400/800 热线号

开放 400/800 热线

-

400 热线脱敏：400-****8888

热线格式 400-XXX-XXXX（v-model 为 400-6668888），徽标显示「400 热线」； allow-hotline=false 时录入 400 开头将报错（仅普通座机）。

区号位直接填 400/800 + 7 位号码（格式 400-XXX-XXXX，无分机）；allow-hotline=false 可关停仅留普通座机。

<script setup lang="ts">
/** 场景：400/800 热线号——区号位直接填 400/800 + 7 位号码（无分机），可关停 */
import { ref } from 'vue'
import { BizPhoneInput } from 'vue3-ep-biz-lib'

const hotline = ref('400-6668888')
const allow = ref(true)
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 420px">
    <el-switch v-model="allow" active-text="开放 400/800 热线" />
    <BizPhoneInput v-model="hotline" type="landline" :allow-hotline="allow" :allow-extension="false" />
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      热线格式 400-XXX-XXXX（v-model 为 <code>400-6668888</code>），徽标显示「400 热线」；
      allow-hotline=false 时录入 400 开头将报错（仅普通座机）。
    </p>
  </el-space>
</template>

显示代码

手机 + 座机混合表单

新建联系人

姓名

手机号

中国移动脱敏：139****1234

座机

--

座机脱敏：021-****6666

分机

新建联系人：手机必填（规则校验）+ 座机选填，同一表单两种类型并用。

<script setup lang="ts">
/** 场景：手机 + 座机混合表单——新建联系人（手机必填 / 座机选填） */
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance } from 'element-plus'
import { BizPhoneInput } from 'vue3-ep-biz-lib'

const formRef = ref<FormInstance>()

const form = reactive({
  name: '李静',
  mobile: '13956781234',
  landline: '021-58886666',
  ext: '8002',
})

const rules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      validator: (_rule: unknown, value: string, callback: (error?: Error) => void) => {
        if (value !== '' && !/^1[3-9]\d{9}$/.test(value)) callback(new Error('手机号格式不正确'))
        else callback()
      },
      trigger: 'blur',
    },
  ],
}

const onSubmit = (): void => {
  void formRef.value?.validate((valid) => {
    if (!valid) return
    ElMessage.success(`已保存：${form.name} / ${form.mobile} / ${form.landline}-${form.ext}`)
  })
}
</script>

<template>
  <el-card shadow="never" style="width: 520px">
    <template #header>新建联系人</template>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="84px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" maxlength="20" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <BizPhoneInput v-model="form.mobile" />
      </el-form-item>
      <el-form-item label="座机">
        <BizPhoneInput v-model="form.landline" type="landline" placeholder="区号" />
      </el-form-item>
      <el-form-item label="分机">
        <el-input v-model="form.ext" maxlength="6" style="width: 160px" placeholder="选填" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存联系人</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

显示代码

座机异步回显与脱敏

plain 明文masked 脱敏

--

masked 非聚焦态显示 0571-****5588，聚焦显原文核对；v-model 始终明文。

接口晚到回填（含分机）；mask-mode=masked 非聚焦显示 0571-****5588，聚焦显原文。

<script setup lang="ts">
/** 场景：异步回显与脱敏——接口晚到回填座机 / masked 非聚焦脱敏 */
import { ref } from 'vue'
import { BizPhoneInput } from 'vue3-ep-biz-lib'

const phone = ref('')
const maskMode = ref<'plain' | 'masked'>('masked')

const fillRemote = (): void => {
  // 模拟接口晚到回显（客户档案）
  setTimeout(() => {
    phone.value = '0571-87665588-302'
  }, 300)
}
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 420px">
    <el-radio-group v-model="maskMode">
      <el-radio-button value="plain">plain 明文</el-radio-button>
      <el-radio-button value="masked">masked 脱敏</el-radio-button>
    </el-radio-group>
    <BizPhoneInput v-model="phone" type="landline" :mask-mode="maskMode" />
    <el-button size="small" type="primary" @click="fillRemote">模拟接口回显（杭州带分机）</el-button>
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      masked 非聚焦态显示 <code>0571-****5588</code>，聚焦显原文核对；v-model 始终明文。
    </p>
  </el-space>
</template>

显示代码

座机事件与结构化 info

--

座机脱敏：025-****3221

change / blur 的 BizPhoneInfo 携带 kind / area / number / ext，座机录入免二次拆串。

<script setup lang="ts">
/** 场景：change/blur 事件面板——座机 info 携带 kind/area/number/ext 结构化字段 */
import { ref } from 'vue'
import { BizPhoneInput } from 'vue3-ep-biz-lib'
import type { BizPhoneInfo } from 'vue3-ep-biz-lib'

const phone = ref('025-84433221-66')
const last = ref<BizPhoneInfo | null>(null)

const onEvent = (label: string, info: BizPhoneInfo): void => {
  last.value = info
  log.value.unshift(`${label}：${info.formatted}`)
}

const log = ref<string[]>([])
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 460px">
    <BizPhoneInput v-model="phone" type="landline" @change="(i) => onEvent('change', i)" @blur="(i) => onEvent('blur', i)" />
    <el-descriptions v-if="last" :column="1" border size="small" title="BizPhoneInfo">
      <el-descriptions-item label="kind">{{ last.kind }}</el-descriptions-item>
      <el-descriptions-item label="value">{{ last.value }}</el-descriptions-item>
      <el-descriptions-item label="formatted">{{ last.formatted }}</el-descriptions-item>
      <el-descriptions-item label="area / number / ext">
        {{ last.area }} / {{ last.number }} / {{ last.ext === '' ? '—' : last.ext }}
      </el-descriptions-item>
      <el-descriptions-item label="masked">{{ last.masked }}</el-descriptions-item>
      <el-descriptions-item label="valid">{{ last.valid }}</el-descriptions-item>
    </el-descriptions>
  </el-space>
</template>

显示代码

Props

属性名	类型	默认值	说明
model-value / v-model	string	''	手机号（纯数字明文）
placeholder	string	'请输入手机号'	占位文案
disabled	boolean	false	禁用
clearable	boolean	true	可清空
mask-mode	'plain' | 'masked'	'plain'	展示形态：masked 非聚焦脱敏、聚焦显原文
show-error	boolean	true	失焦校验失败展示原因
show-info	boolean	true	展示运营商识别与脱敏预览
type	'mobile' | 'landline'	'mobile'	输入类型：landline 座机（区号-号码[-分机]，支持 400/800 热线）
allow-extension	boolean	true	[landline] 允许分机（2-6 位，输出以 - 拼接）
allow-hotline	boolean	true	[landline] 允许 400/800 热线号（区号位 400/800 + 7 位号码）

其余属性经 v-bind="$attrs" 透传 el-input（maxlength 已内置 11，无需传）。

Events

事件名	参数	说明
update:model-value	(value: string)	纯数字手机号
change	(info: BizPhoneInfo)	输入变化（含校验 / 运营商 / 脱敏）
blur	(info: BizPhoneInfo)	失焦（含最终校验结论）

BizPhoneInfo：value 纯数字、formatted 3-4-4 分段、masked 脱敏、valid / message 校验结论、carrier 运营商（yidong / liantong / dianxin / guangdian / virtual / unknown，CARRIER_LABELS 可取中文）。 座机模式追加：kind（mobile / landline）、area 区号、number 主体号码、ext 分机（v-model 为 区号-号码[-分机] 串）。

Slots

插槽名	说明
prefix	输入框前缀（如图标）
suffix	输入框后缀

Expose

属性/方法	说明
validate	() => BizPhoneInfo 编程式校验取完整信息

校验口径说明

• 合法性仅按 1[3-9] 开头 11 位判定——工信部新号段持续放号，不做号段白名单拦截；
• 运营商识别独立于校验（识别不出显示「未知号段」，不影响 valid）；
• 空值视为通过，必填由表单规则控制。